my full project changes
This commit is contained in:
dineshkumarkannan
parent
78413cd15d
commit
0275824555
14
.editorconfig
Normal file
14
.editorconfig
Normal file
@ -0,0 +1,14 @@
|
||||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = 0
|
||||
trim_trailing_whitespace = false
|
||||
33
.gitignore
vendored
Normal file
33
.gitignore
vendored
Normal file
@ -0,0 +1,33 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/bower_components
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
*.launch
|
||||
.settings/
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
#System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1 +1 @@
|
||||
This Repo is for Apollo - Study Centre Application.s
|
||||
This Repo is for Apollo - Study Centre Application.1
|
||||
132
angular.json
Normal file
132
angular.json
Normal file
@ -0,0 +1,132 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"coreui-angular": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/scss/style.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"node_modules/chart.js/dist/Chart.min.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "coreui-angular:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "coreui-angular:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "coreui-angular:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"karmaConfig": "./karma.conf.js",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"node_modules/chart.js/dist/Chart.min.js"
|
||||
],
|
||||
"styles": [
|
||||
"src/scss/style.scss"
|
||||
],
|
||||
"assets": [
|
||||
"src/assets"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"coreui-angular-e2e": {
|
||||
"root": "",
|
||||
"sourceRoot": "e2e",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "coreui-angular:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "coreui-angular",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
}
|
||||
}
|
||||
14
e2e/app.e2e-spec.ts
Normal file
14
e2e/app.e2e-spec.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { CoreUIPage } from './app.po';
|
||||
|
||||
describe('core-ui App', function() {
|
||||
let page: CoreUIPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new CoreUIPage();
|
||||
});
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('app works!');
|
||||
});
|
||||
});
|
||||
11
e2e/app.po.ts
Normal file
11
e2e/app.po.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { browser, element, by } from 'protractor/globals';
|
||||
|
||||
export class CoreUIPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
15
e2e/app/nav.service.spec.ts
Normal file
15
e2e/app/nav.service.spec.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { NavService } from './nav.service';
|
||||
|
||||
describe('NavService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [NavService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([NavService], (service: NavService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
9
e2e/app/nav.service.ts
Normal file
9
e2e/app/nav.service.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NavService {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
15
e2e/app/service/nav.service.spec.ts
Normal file
15
e2e/app/service/nav.service.spec.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { NavService } from './nav.service';
|
||||
|
||||
describe('NavService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [NavService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([NavService], (service: NavService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
9
e2e/app/service/nav.service.ts
Normal file
9
e2e/app/service/nav.service.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NavService {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
12
e2e/tsconfig.e2e.json
Normal file
12
e2e/tsconfig.e2e.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
42
karma.conf.js
Normal file
42
karma.conf.js
Normal file
@ -0,0 +1,42 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
files: [
|
||||
|
||||
],
|
||||
preprocessors: {
|
||||
|
||||
},
|
||||
mime: {
|
||||
'text/x-typescript': ['ts','tsx']
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
|
||||
reporters: config.angularCli && config.angularCli.codeCoverage
|
||||
? ['progress', 'coverage-istanbul']
|
||||
: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
12296
package-lock.json
generated
Normal file
12296
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
61
package.json
Normal file
61
package.json
Normal file
@ -0,0 +1,61 @@
|
||||
{
|
||||
"name": "Venba Information Technology",
|
||||
"version": "1.0.0",
|
||||
"description": "VIT - angular6, bootstrap4 admin template",
|
||||
"author": "",
|
||||
"url": "",
|
||||
"copyright": "Copyright 2018",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build --prod",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/common": "6.0.7",
|
||||
"@angular/compiler": "6.0.7",
|
||||
"@angular/core": "6.0.7",
|
||||
"@angular/forms": "6.0.7",
|
||||
"@angular/http": "6.0.7",
|
||||
"@angular/platform-browser": "6.0.7",
|
||||
"@angular/platform-browser-dynamic": "6.0.7",
|
||||
"@angular/router": "6.0.7",
|
||||
"@angular/upgrade": "6.0.7",
|
||||
"chart.js": "2.6.0",
|
||||
"core-js": "2.5.0",
|
||||
"moment": "2.18.1",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ngx-bootstrap": "^3.0.1",
|
||||
"rxjs": "^6.2.1",
|
||||
"ts-helpers": "1.1.2",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "6.0.8",
|
||||
"@angular/compiler-cli": "6.0.7",
|
||||
"@types/jasmine": "2.5.54",
|
||||
"@types/node": "8.0.26",
|
||||
"codelyzer": "3.1.2",
|
||||
"jasmine-core": "2.8.0",
|
||||
"jasmine-spec-reporter": "4.2.1",
|
||||
"karma": "1.7.1",
|
||||
"karma-chrome-launcher": "2.2.0",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "1.3.0",
|
||||
"karma-jasmine": "1.1.0",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"protractor": "5.1.2",
|
||||
"ts-node": "3.3.0",
|
||||
"tslint": "5.7.0",
|
||||
"typescript": "2.7.2",
|
||||
"@angular-devkit/build-angular": "~0.6.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.4",
|
||||
"npm": ">= 5.6.0"
|
||||
}
|
||||
}
|
||||
30
protractor.conf.js
Normal file
30
protractor.conf.js
Normal file
@ -0,0 +1,30 @@
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
beforeLaunch: function() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
},
|
||||
onPrepare() {
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
0
src/app/app.component.html
Normal file
0
src/app/app.component.html
Normal file
32
src/app/app.component.spec.ts
Normal file
32
src/app/app.component.spec.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
});
|
||||
TestBed.compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it(`should have as title 'app works!'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app works!');
|
||||
}));
|
||||
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('app works!');
|
||||
}));
|
||||
});
|
||||
8
src/app/app.component.ts
Normal file
8
src/app/app.component.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line
|
||||
selector: 'body',
|
||||
template: '<router-outlet></router-outlet>'
|
||||
})
|
||||
export class AppComponent { }
|
||||
89
src/app/app.module.ts
Normal file
89
src/app/app.module.ts
Normal file
@ -0,0 +1,89 @@
|
||||
import { BrowserModule} from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
// import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
|
||||
|
||||
import { StatusModule } from './views/status/status.module';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// Import containers
|
||||
import {
|
||||
FullLayout,
|
||||
SimpleLayout
|
||||
} from './containers';
|
||||
|
||||
const APP_CONTAINERS = [
|
||||
FullLayout,
|
||||
SimpleLayout
|
||||
]
|
||||
|
||||
// Import components
|
||||
import {
|
||||
AppAside,
|
||||
AppBreadcrumbs,
|
||||
AppFooter,
|
||||
AppHeader,
|
||||
AppSidebar
|
||||
} from './components';
|
||||
|
||||
const APP_COMPONENTS = [
|
||||
AppAside,
|
||||
AppBreadcrumbs,
|
||||
AppFooter,
|
||||
AppHeader,
|
||||
AppSidebar
|
||||
]
|
||||
|
||||
// Import directives
|
||||
import {
|
||||
AsideToggleDirective,
|
||||
NAV_DROPDOWN_DIRECTIVES,
|
||||
SIDEBAR_TOGGLE_DIRECTIVES
|
||||
} from './directives';
|
||||
|
||||
const APP_DIRECTIVES = [
|
||||
AsideToggleDirective,
|
||||
NAV_DROPDOWN_DIRECTIVES,
|
||||
SIDEBAR_TOGGLE_DIRECTIVES
|
||||
]
|
||||
|
||||
// Import routing module
|
||||
import { AppRoutingModule } from './app.routing';
|
||||
|
||||
// Import 3rd party components
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
// HTTP_INTERCEPTORS,
|
||||
BsDropdownModule.forRoot(),
|
||||
TabsModule.forRoot(),
|
||||
TooltipModule.forRoot(),
|
||||
ChartsModule,
|
||||
StatusModule,
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
...APP_CONTAINERS,
|
||||
...APP_COMPONENTS,
|
||||
...APP_DIRECTIVES
|
||||
],
|
||||
providers: [{
|
||||
provide: LocationStrategy,
|
||||
useClass: HashLocationStrategy
|
||||
}],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
72
src/app/app.routing.ts
Normal file
72
src/app/app.routing.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
// Import Containers
|
||||
import {
|
||||
FullLayout,
|
||||
SimpleLayout
|
||||
} from './containers';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'dashboard',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: FullLayout,
|
||||
data: {
|
||||
title: 'Home'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
loadChildren: './views/dashboard/dashboard.module#DashboardModule'
|
||||
},
|
||||
{
|
||||
path: 'components',
|
||||
loadChildren: './views/components/components.module#ComponentsModule'
|
||||
},
|
||||
{
|
||||
path: 'icons',
|
||||
loadChildren: './views/icons/icons.module#IconsModule'
|
||||
},
|
||||
{
|
||||
path: 'widgets',
|
||||
loadChildren: './views/widgets/widgets.module#WidgetsModule'
|
||||
},
|
||||
{
|
||||
path: 'charts',
|
||||
loadChildren: './views/chartjs/chartjs.module#ChartJSModule'
|
||||
},
|
||||
{
|
||||
path: 'masters',
|
||||
loadChildren: './views/masters/masters.module#MastersModule'
|
||||
},
|
||||
{
|
||||
path: 'status',
|
||||
loadChildren: './views/status/status.module#StatusModule'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'pages',
|
||||
component: SimpleLayout,
|
||||
data: {
|
||||
title: 'Pages'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
loadChildren: './views/pages/pages.module#PagesModule',
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forRoot(routes, {useHash: true})],
|
||||
exports: [ RouterModule ]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
253
src/app/components/app-aside/app-aside.component.html
Normal file
253
src/app/components/app-aside/app-aside.component.html
Normal file
@ -0,0 +1,253 @@
|
||||
<aside class="aside-menu">
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i></ng-template>
|
||||
<div class="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
|
||||
<small><b>Today</b></small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout callout-warning m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Meeting with <strong>Lucas</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-info m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Skype with <strong>Megan</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
|
||||
<small class="text-muted"><i class="icon-social-skype"></i> On-line </small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
|
||||
<small><b>Tomorrow</b></small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout callout-danger m-0 py-3">
|
||||
<div>New UI Project - <strong>deadline</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-success m-0 py-3">
|
||||
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-primary m-0 py-3">
|
||||
<div><strong>Team meeting</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-speech"></i></ng-template>
|
||||
<div class="p-3">
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-settings"></i></ng-template>
|
||||
<div class="p-3">
|
||||
<h6>Settings</h6>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-4">
|
||||
<small><b>Option 1</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 2</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 3</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 4</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h6>System Utilization</h6>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">11444GB/16384MB</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">243GB/256GB</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">25GB/256GB</small>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</aside>
|
||||
9
src/app/components/app-aside/app-aside.component.ts
Normal file
9
src/app/components/app-aside/app-aside.component.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-aside',
|
||||
templateUrl: './app-aside.component.html'
|
||||
})
|
||||
export class AppAside {
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
1
src/app/components/app-aside/index.ts
Normal file
1
src/app/components/app-aside/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './app-aside.component';
|
||||
@ -0,0 +1,46 @@
|
||||
|
||||
import {filter} from 'rxjs/operators';
|
||||
import { Component } from '@angular/core';
|
||||
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumbs',
|
||||
template: `
|
||||
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
|
||||
<li class="breadcrumb-item"
|
||||
*ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
|
||||
[ngClass]="{active: last}">
|
||||
<a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
|
||||
<span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
|
||||
</li>
|
||||
</ng-template>`
|
||||
})
|
||||
export class AppBreadcrumbs {
|
||||
breadcrumbs: Array<Object>;
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute
|
||||
) {
|
||||
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
|
||||
this.breadcrumbs = [];
|
||||
let currentRoute = this.route.root,
|
||||
url = '';
|
||||
do {
|
||||
const childrenRoutes = currentRoute.children;
|
||||
currentRoute = null;
|
||||
childrenRoutes.forEach(route => {
|
||||
if (route.outlet === 'primary') {
|
||||
const routeSnapshot = route.snapshot;
|
||||
url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
|
||||
this.breadcrumbs.push({
|
||||
label: route.snapshot.data,
|
||||
url: url
|
||||
});
|
||||
currentRoute = route;
|
||||
}
|
||||
});
|
||||
} while (currentRoute);
|
||||
});
|
||||
}
|
||||
}
|
||||
1
src/app/components/app-breadcrumbs/index.ts
Normal file
1
src/app/components/app-breadcrumbs/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './app-breadcrumbs.component';
|
||||
4
src/app/components/app-footer/app-footer.component.html
Normal file
4
src/app/components/app-footer/app-footer.component.html
Normal file
@ -0,0 +1,4 @@
|
||||
<footer class="app-footer">
|
||||
<a href="http://coreui.io">Venba</a> © 2018.
|
||||
<!--<span class="float-right">Powered by <a href="#">Venba</a></span>-->
|
||||
</footer>
|
||||
9
src/app/components/app-footer/app-footer.component.ts
Normal file
9
src/app/components/app-footer/app-footer.component.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
templateUrl: './app-footer.component.html'
|
||||
})
|
||||
export class AppFooter {
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
1
src/app/components/app-footer/index.ts
Normal file
1
src/app/components/app-footer/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './app-footer.component';
|
||||
22
src/app/components/app-header/app-header.component.html
Normal file
22
src/app/components/app-header/app-header.component.html
Normal file
@ -0,0 +1,22 @@
|
||||
<header class="app-header navbar">
|
||||
<button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>☰</button>
|
||||
<a class="navbar-brand" href="#"></a>
|
||||
<button class="navbar-toggler d-md-down-none" type="button" appSidebarToggler>☰</button>
|
||||
<ul class="nav navbar-nav d-md-down-none">
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Dashboard</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
|
||||
<a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="d-md-down-none">admin</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
|
||||
<div class="dropdown-header text-center"><strong>Account</strong></div>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
23
src/app/components/app-header/app-header.component.ts
Normal file
23
src/app/components/app-header/app-header.component.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './app-header.component.html'
|
||||
})
|
||||
export class AppHeader {
|
||||
|
||||
// public disabled = false;
|
||||
// public status: {isopen: boolean} = {isopen: false};
|
||||
//
|
||||
// public toggled(open: boolean): void {
|
||||
// console.log('Dropdown is now: ', open);
|
||||
// }
|
||||
//
|
||||
// public toggleDropdown($event: MouseEvent): void {
|
||||
// $event.preventDefault();
|
||||
// $event.stopPropagation();
|
||||
// this.status.isopen = !this.status.isopen;
|
||||
// }
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
1
src/app/components/app-header/index.ts
Normal file
1
src/app/components/app-header/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './app-header.component';
|
||||
81
src/app/components/app-sidebar/app-sidebar.component.html
Normal file
81
src/app/components/app-sidebar/app-sidebar.component.html
Normal file
@ -0,0 +1,81 @@
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav" *ngFor="let nav of navItems">
|
||||
<li class="nav-item" *ngIf="!nav.children" >
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="[nav.url]"><i class="{{nav.icon}}"></i>{{nav.name}}</a>
|
||||
</li>
|
||||
<li *ngIf="nav.children" class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="{{nav.icon}}"></i> {{nav.name}}</a>
|
||||
<ul class="nav-dropdown-items" *ngFor="let sub of nav.children">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="[sub.url]"><i class="{{sub.icon}}"></i> {{sub.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!--<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-puzzle"></i> Components</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/buttons']"><i class="icon-puzzle"></i> Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/social-buttons']"><i class="icon-puzzle"></i> Social Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/cards']"><i class="icon-puzzle"></i> Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/forms']"><i class="icon-puzzle"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/modals']"><i class="icon-puzzle"></i> Modals</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/switches']"><i class="icon-puzzle"></i> Switches</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tables']"><i class="icon-puzzle"></i> Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tabs']"><i class="icon-puzzle"></i> Tabs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>-->
|
||||
<!--<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Icons</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/font-awesome']"><i class="icon-star"></i> Font Awesome<span class="badge badge-secondary">4.7</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/simple-line-icons']"><i class="icon-star"></i> Simple Line Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>-->
|
||||
<!--<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/widgets']"><i class="icon-calculator"></i> Widgets</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/charts']"><i class="icon-pie-chart"></i> Charts</a>
|
||||
</li>-->
|
||||
<!--<li class="nav-item nav-dropdown" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Pages</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/login']"><i class="icon-star"></i> Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/register']"><i class="icon-star"></i> Register</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/404']"><i class="icon-star"></i> Error 404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/500']"><i class="icon-star"></i> Error 500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
79
src/app/components/app-sidebar/app-sidebar.component.ts
Normal file
79
src/app/components/app-sidebar/app-sidebar.component.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
templateUrl: './app-sidebar.component.html'
|
||||
})
|
||||
export class AppSidebar {
|
||||
ngOnInit(): void {}
|
||||
|
||||
navItems = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
url: '/dashboard',
|
||||
icon: 'icon-speedometer'
|
||||
},
|
||||
// {
|
||||
// name: 'Widgets',
|
||||
// url: '/widgets',
|
||||
// icon: 'icon-calculator'
|
||||
// },
|
||||
// {
|
||||
// name: 'Charts',
|
||||
// url: '/charts',
|
||||
// icon: 'icon-pie-chart'
|
||||
// },
|
||||
// {
|
||||
// name: 'Components',
|
||||
// icon: 'icon-pie-chart',
|
||||
// children: [
|
||||
// {
|
||||
// name: 'Buttons',
|
||||
// url: '/components/buttons',
|
||||
// icon: 'icon-puzzle'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
name: 'Masters',
|
||||
icon: 'fa fa-gear',
|
||||
children: [
|
||||
{
|
||||
name: 'Role',
|
||||
url: '/masters/role',
|
||||
icon: 'fa fa-user-secret'
|
||||
},{
|
||||
name: 'Employee',
|
||||
url: '/masters/employee',
|
||||
icon: 'fa fa-users'
|
||||
},{
|
||||
name: 'Study Center',
|
||||
url: '/masters/studyCenter',
|
||||
icon: 'fa fa-language'
|
||||
}
|
||||
]
|
||||
},{
|
||||
name: 'Status',
|
||||
icon: 'fa fa-tasks',
|
||||
children: [
|
||||
{
|
||||
name: 'Application',
|
||||
url: '/status/application',
|
||||
icon: 'fa fa-sticky-note'
|
||||
},{
|
||||
name: 'Study Material',
|
||||
url: '/status/studyMaterial',
|
||||
icon: 'fa fa-square-o'
|
||||
},{
|
||||
name: 'Answer Booklet',
|
||||
url: '/status/answerBooklet',
|
||||
icon: 'fa fa-file-word-o'
|
||||
},{
|
||||
name: 'Documents',
|
||||
url: '/status/documents',
|
||||
icon: 'fa fa-file-pdf-o'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
1
src/app/components/app-sidebar/index.ts
Normal file
1
src/app/components/app-sidebar/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './app-sidebar.component';
|
||||
5
src/app/components/index.ts
Normal file
5
src/app/components/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export * from './app-aside';
|
||||
export * from './app-breadcrumbs';
|
||||
export * from './app-footer';
|
||||
export * from './app-header';
|
||||
export * from './app-sidebar';
|
||||
24
src/app/containers/full-layout/full-layout.component.html
Normal file
24
src/app/containers/full-layout/full-layout.component.html
Normal file
@ -0,0 +1,24 @@
|
||||
<app-header></app-header>
|
||||
<div class="app-body">
|
||||
<app-sidebar></app-sidebar>
|
||||
<!-- Main content -->
|
||||
<main class="main">
|
||||
<!-- Breadcrumb -->
|
||||
<ol class="breadcrumb">
|
||||
<app-breadcrumbs></app-breadcrumbs>
|
||||
<!-- Breadcrumb Menu-->
|
||||
<!--<li class="breadcrumb-menu d-md-down-none">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<a class="btn" href="#"><i class="icon-speech"></i></a>
|
||||
<a class="btn" [routerLink]="['/dashboard']"><i class="icon-graph"></i> Dashboard</a>
|
||||
<a class="btn" href="#"><i class="icon-settings"></i> Settings</a>
|
||||
</div>
|
||||
</li>-->
|
||||
</ol>
|
||||
<div class="container-fluid">
|
||||
<router-outlet></router-outlet>
|
||||
</div><!-- /.conainer-fluid -->
|
||||
</main>
|
||||
<app-aside></app-aside>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
23
src/app/containers/full-layout/full-layout.component.ts
Normal file
23
src/app/containers/full-layout/full-layout.component.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './full-layout.component.html'
|
||||
})
|
||||
export class FullLayout implements OnInit {
|
||||
|
||||
// public disabled = false;
|
||||
// public status: {isopen: boolean} = {isopen: false};
|
||||
//
|
||||
// public toggled(open: boolean): void {
|
||||
// console.log('Dropdown is now: ', open);
|
||||
// }
|
||||
//
|
||||
// public toggleDropdown($event: MouseEvent): void {
|
||||
// $event.preventDefault();
|
||||
// $event.stopPropagation();
|
||||
// this.status.isopen = !this.status.isopen;
|
||||
// }
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
1
src/app/containers/full-layout/index.ts
Normal file
1
src/app/containers/full-layout/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './full-layout.component';
|
||||
2
src/app/containers/index.ts
Normal file
2
src/app/containers/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './full-layout';
|
||||
export * from './simple-layout';
|
||||
1
src/app/containers/simple-layout/index.ts
Normal file
1
src/app/containers/simple-layout/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './simple-layout.component';
|
||||
12
src/app/containers/simple-layout/simple-layout.component.ts
Normal file
12
src/app/containers/simple-layout/simple-layout.component.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
template: '<router-outlet></router-outlet>',
|
||||
})
|
||||
export class SimpleLayout implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
}
|
||||
17
src/app/directives/aside/aside.directive.ts
Normal file
17
src/app/directives/aside/aside.directive.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Allows the aside to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appAsideMenuToggler]',
|
||||
})
|
||||
export class AsideToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('aside-menu-hidden');
|
||||
}
|
||||
}
|
||||
1
src/app/directives/aside/index.ts
Normal file
1
src/app/directives/aside/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './aside.directive';
|
||||
3
src/app/directives/index.ts
Normal file
3
src/app/directives/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from './aside';
|
||||
export * from './nav-dropdown';
|
||||
export * from './sidebar';
|
||||
1
src/app/directives/nav-dropdown/index.ts
Normal file
1
src/app/directives/nav-dropdown/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './nav-dropdown.directive';
|
||||
31
src/app/directives/nav-dropdown/nav-dropdown.directive.ts
Normal file
31
src/app/directives/nav-dropdown/nav-dropdown.directive.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { Directive, HostListener, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[appNavDropdown]'
|
||||
})
|
||||
export class NavDropdownDirective {
|
||||
|
||||
constructor(private el: ElementRef) { }
|
||||
|
||||
toggle() {
|
||||
this.el.nativeElement.classList.toggle('open');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the dropdown to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appNavDropdownToggle]'
|
||||
})
|
||||
export class NavDropdownToggleDirective {
|
||||
constructor(private dropdown: NavDropdownDirective) {}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
this.dropdown.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];
|
||||
1
src/app/directives/sidebar/index.ts
Normal file
1
src/app/directives/sidebar/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './sidebar.directive';
|
||||
93
src/app/directives/sidebar/sidebar.directive.ts
Normal file
93
src/app/directives/sidebar/sidebar.directive.ts
Normal file
@ -0,0 +1,93 @@
|
||||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Allows the sidebar to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appSidebarToggler]'
|
||||
})
|
||||
export class SidebarToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[appSidebarMinimizer]'
|
||||
})
|
||||
export class SidebarMinimizeDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-minimized');
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[appMobileSidebarToggler]'
|
||||
})
|
||||
export class MobileSidebarToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
// Check if element has class
|
||||
private hasClass(target: any, elementClassName: string) {
|
||||
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-mobile-show');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the off-canvas sidebar to be closed via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appSidebarClose]'
|
||||
})
|
||||
export class SidebarOffCanvasCloseDirective {
|
||||
constructor() { }
|
||||
|
||||
// Check if element has class
|
||||
private hasClass(target: any, elementClassName: string) {
|
||||
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
|
||||
}
|
||||
|
||||
// Toggle element class
|
||||
private toggleClass(elem: any, elementClassName: string) {
|
||||
let newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
|
||||
if (this.hasClass(elem, elementClassName)) {
|
||||
while (newClass.indexOf(' ' + elementClassName + ' ') >= 0 ) {
|
||||
newClass = newClass.replace( ' ' + elementClassName + ' ' , ' ' );
|
||||
}
|
||||
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
||||
} else {
|
||||
elem.className += ' ' + elementClassName;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
|
||||
if (this.hasClass(document.querySelector('body'), 'sidebar-off-canvas')) {
|
||||
this.toggleClass(document.querySelector('body'), 'sidebar-opened');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const SIDEBAR_TOGGLE_DIRECTIVES = [
|
||||
SidebarToggleDirective,
|
||||
SidebarMinimizeDirective,
|
||||
SidebarOffCanvasCloseDirective,
|
||||
MobileSidebarToggleDirective
|
||||
];
|
||||
|
||||
0
src/app/service/_guard/auth.service.ts
Normal file
0
src/app/service/_guard/auth.service.ts
Normal file
270
src/app/service/role/role.service.ts
Normal file
270
src/app/service/role/role.service.ts
Normal file
@ -0,0 +1,270 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { catchError, map, tap } from 'rxjs/operators';
|
||||
// import { navItems } from './_nav';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class RoleService {
|
||||
private EndPoint = 'http://localhost:4000/';
|
||||
private datas;
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) { }
|
||||
|
||||
|
||||
getNavDetails(): Observable<any> {
|
||||
return this.http.get<any>(this.EndPoint+"nav")
|
||||
.pipe(
|
||||
catchError(this.handleError('getEmployee', []))
|
||||
)
|
||||
}
|
||||
|
||||
getNavDetailsLIst():Observable<any> {
|
||||
return this.http.get<any>(this.EndPoint+"detailsList")
|
||||
.pipe(
|
||||
catchError(this.handleError('getEmployee', []))
|
||||
)
|
||||
}
|
||||
|
||||
addRoleDetailsMaster(details):Observable<any> {
|
||||
return this.http.post<any>(this.EndPoint+"addRole", details)
|
||||
.pipe(
|
||||
catchError(this.handleError('role', []))
|
||||
)
|
||||
}
|
||||
|
||||
updateRoleDetailsMaster(details):Observable<any> {
|
||||
return this.http.put<any>(this.EndPoint+"updateRoleDetails", details)
|
||||
.pipe(
|
||||
catchError(this.handleError('role', []))
|
||||
)
|
||||
}
|
||||
|
||||
getRoleDetails(): Observable<any> {
|
||||
// return this.http.get<any>(this.EndPoint+"roleDetails")
|
||||
return of(this.navItems)
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
private handleError<T>(operation = 'operation', result?: T) {
|
||||
return (error: any): Observable<T> => {
|
||||
|
||||
console.error(error); // log to console instead
|
||||
return of(result as T);
|
||||
};
|
||||
}
|
||||
|
||||
navItems = {
|
||||
"status": true,
|
||||
"message": "nav details list created successfully",
|
||||
"data": [
|
||||
{
|
||||
"id": 3,
|
||||
"role": "ADMIN",
|
||||
"nav": [
|
||||
{
|
||||
"id": 1,
|
||||
"order_details": 1,
|
||||
"name": "Dashboard",
|
||||
"url": "/dashboard",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"order_details": 2,
|
||||
"name": "Employee",
|
||||
"url": "/employee",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"order_details": 3,
|
||||
"name": "Base",
|
||||
"url": "/base",
|
||||
"sub_nav": "[1]",
|
||||
"Sub_Nav": "[1]",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"order_details": 4,
|
||||
"name": "Create Role",
|
||||
"url": "/createRole",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"order_details": 5,
|
||||
"name": "Role Details",
|
||||
"url": "/listRole",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"role": "EMPLOYEE",
|
||||
"nav": [
|
||||
{
|
||||
"id": 1,
|
||||
"order_details": 1,
|
||||
"name": "Dashboard",
|
||||
"url": "/dashboard",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"order_details": 3,
|
||||
"name": "Base",
|
||||
"url": "/base",
|
||||
"sub_nav": "[1]",
|
||||
"Sub_Nav": "[1]",
|
||||
"isActive": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"role": "EMPLOYEE",
|
||||
"nav": [
|
||||
{
|
||||
"id": 1,
|
||||
"order_details": 1,
|
||||
"name": "Dashboard",
|
||||
"url": "/dashboard",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"order_details": 3,
|
||||
"name": "Base",
|
||||
"url": "/base",
|
||||
"sub_nav": "[1]",
|
||||
"Sub_Nav": "[1]",
|
||||
"isActive": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"role": "FINANCE",
|
||||
"nav": [
|
||||
{
|
||||
"id": 1,
|
||||
"order_details": 1,
|
||||
"name": "Dashboard",
|
||||
"url": "/dashboard",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"order_details": 4,
|
||||
"name": "Create Role",
|
||||
"url": "/createRole",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 0
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"order_details": 5,
|
||||
"name": "Role Details",
|
||||
"url": "/listRole",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 0
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"order_details": 2,
|
||||
"name": "Employee",
|
||||
"url": "/employee",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 29,
|
||||
"role": "MANAGER",
|
||||
"nav": [
|
||||
{
|
||||
"id": 1,
|
||||
"order_details": 1,
|
||||
"name": "Dashboard",
|
||||
"url": "/dashboard",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"order_details": 2,
|
||||
"name": "Employee",
|
||||
"url": "/employee",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 0
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"order_details": 3,
|
||||
"name": "Base",
|
||||
"url": "/base",
|
||||
"sub_nav": "[1]",
|
||||
"Sub_Nav": "1",
|
||||
"isActive": 0
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"order_details": 1,
|
||||
"name": "Dashboard",
|
||||
"url": "/dashboard",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"order_details": 4,
|
||||
"name": "Create Role",
|
||||
"url": "/createRole",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 0
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"order_details": 5,
|
||||
"name": "Role Details",
|
||||
"url": "/listRole",
|
||||
"sub_nav": "",
|
||||
"Sub_Nav": "",
|
||||
"isActive": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
20
src/app/views/chartjs/chartjs-routing.module.ts
Normal file
20
src/app/views/chartjs/chartjs-routing.module.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ChartJSComponent,
|
||||
data: {
|
||||
title: 'Charts'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ChartJSRoutingModule {}
|
||||
130
src/app/views/chartjs/chartjs.component.html
Normal file
130
src/app/views/chartjs/chartjs.component.html
Normal file
@ -0,0 +1,130 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="card-columns cols-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Line Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[colors]="lineChartColours"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Bar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChartData"
|
||||
[labels]="barChartLabels"
|
||||
[options]="barChartOptions"
|
||||
[legend]="barChartLegend"
|
||||
[chartType]="barChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Doughnut Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartData"
|
||||
[labels]="doughnutChartLabels"
|
||||
[chartType]="doughnutChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Radar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="radarChartData"
|
||||
[labels]="radarChartLabels"
|
||||
[chartType]="radarChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Pie Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="pieChartData"
|
||||
[labels]="pieChartLabels"
|
||||
[chartType]="pieChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Polar Area Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="polarAreaChartData"
|
||||
[labels]="polarAreaChartLabels"
|
||||
[legend]="polarAreaLegend"
|
||||
[chartType]="polarAreaChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
97
src/app/views/chartjs/chartjs.component.ts
Normal file
97
src/app/views/chartjs/chartjs.component.ts
Normal file
@ -0,0 +1,97 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'chartjs.component.html'
|
||||
})
|
||||
export class ChartJSComponent {
|
||||
|
||||
// lineChart
|
||||
public lineChartData: Array<any> = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
|
||||
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
|
||||
];
|
||||
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true
|
||||
};
|
||||
public lineChartColours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
},
|
||||
{ // dark grey
|
||||
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||
borderColor: 'rgba(77,83,96,1)',
|
||||
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||
},
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}
|
||||
];
|
||||
public lineChartLegend = true;
|
||||
public lineChartType = 'line';
|
||||
|
||||
// barChart
|
||||
public barChartOptions: any = {
|
||||
scaleShowVerticalLines: false,
|
||||
responsive: true
|
||||
};
|
||||
public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
public barChartType = 'bar';
|
||||
public barChartLegend = true;
|
||||
|
||||
public barChartData: any[] = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
|
||||
];
|
||||
|
||||
// Doughnut
|
||||
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
public doughnutChartData: number[] = [350, 450, 100];
|
||||
public doughnutChartType = 'doughnut';
|
||||
|
||||
// Radar
|
||||
public radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
|
||||
public radarChartData: any = [
|
||||
{data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B'}
|
||||
];
|
||||
public radarChartType = 'radar';
|
||||
|
||||
// Pie
|
||||
public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
public pieChartData: number[] = [300, 500, 100];
|
||||
public pieChartType = 'pie';
|
||||
|
||||
// PolarArea
|
||||
public polarAreaChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
public polarAreaChartData: number[] = [300, 500, 100, 40, 120];
|
||||
public polarAreaLegend = true;
|
||||
|
||||
public polarAreaChartType = 'polarArea';
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
14
src/app/views/chartjs/chartjs.module.ts
Normal file
14
src/app/views/chartjs/chartjs.module.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
import { ChartJSRoutingModule } from './chartjs-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ChartJSRoutingModule,
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [ ChartJSComponent ]
|
||||
})
|
||||
export class ChartJSModule { }
|
||||
231
src/app/views/components/buttons.component.html
Normal file
231
src/app/views/components/buttons.component.html
Normal file
@ -0,0 +1,231 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
<button type="button" class="btn btn-link"><i class="fa fa-link"></i> Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-lg">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-sm">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-sm">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
|
||||
<button type="button" class="btn btn-link" disabled="disabled">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-success active">Success</button>
|
||||
<button type="button" class="btn btn-info active">Info</button>
|
||||
<button type="button" class="btn btn-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-danger active">Danger</button>
|
||||
<button type="button" class="btn btn-link active">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-link btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<!-- Secondary, outline button -->
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-outline-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger" disabled="disabled">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success active">Success</button>
|
||||
<button type="button" class="btn btn-outline-info active">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger active">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/buttons.component.ts
Normal file
10
src/app/views/components/buttons.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'buttons.component.html'
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
320
src/app/views/components/cards.component.html
Normal file
320
src/app/views/components/cards.component.html
Normal file
@ -0,0 +1,320 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="card-footer">Card footer</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-check"></i>Card with icon
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with switch
|
||||
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-success float-right">Success</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-pill badge-danger float-right">42</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card border-primary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card border-secondary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card border-success">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card border-info">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card border-warning">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card border-danger">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-primary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-secondary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-success">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-info">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-warning">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-danger">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-primary text-center">
|
||||
<div class="card-body">
|
||||
<blockquote class="card-bodyquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-success text-center">
|
||||
<div class="card-body">
|
||||
<blockquote class="card-bodyquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-info text-center">
|
||||
<div class="card-body">
|
||||
<blockquote class="card-bodyquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-warning text-center">
|
||||
<div class="card-body">
|
||||
<blockquote class="card-bodyquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-danger text-center">
|
||||
<div class="card-body">
|
||||
<blockquote class="card-bodyquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-primary text-center">
|
||||
<div class="card-body">
|
||||
<blockquote class="card-bodyquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-primary">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-success">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-info">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-warning">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card text-white bg-danger">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/cards.component.ts
Normal file
10
src/app/views/components/cards.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'cards.component.html'
|
||||
})
|
||||
export class CardsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
84
src/app/views/components/components-routing.module.ts
Normal file
84
src/app/views/components/components-routing.module.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Components'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
data: {
|
||||
title: 'Buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'cards',
|
||||
component: CardsComponent,
|
||||
data: {
|
||||
title: 'Cards'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: FormsComponent,
|
||||
data: {
|
||||
title: 'Forms'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'modals',
|
||||
component: ModalsComponent,
|
||||
data: {
|
||||
title: 'Modals'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'social-buttons',
|
||||
component: SocialButtonsComponent,
|
||||
data: {
|
||||
title: 'Social buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'switches',
|
||||
component: SwitchesComponent,
|
||||
data: {
|
||||
title: 'Switches'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: TablesComponent,
|
||||
data: {
|
||||
title: 'Tables'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
component: TabsComponent,
|
||||
data: {
|
||||
title: 'Tabs'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ComponentsRoutingModule {}
|
||||
43
src/app/views/components/components.module.ts
Normal file
43
src/app/views/components/components.module.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
|
||||
// Forms Component
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
|
||||
// Modal Component
|
||||
import { ModalModule } from 'ngx-bootstrap/modal';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
|
||||
// Tabs Component
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
// Components Routing
|
||||
import { ComponentsRoutingModule } from './components-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ComponentsRoutingModule,
|
||||
BsDropdownModule.forRoot(),
|
||||
ModalModule.forRoot(),
|
||||
TabsModule
|
||||
],
|
||||
declarations: [
|
||||
ButtonsComponent,
|
||||
CardsComponent,
|
||||
FormsComponent,
|
||||
ModalsComponent,
|
||||
SocialButtonsComponent,
|
||||
SwitchesComponent,
|
||||
TablesComponent,
|
||||
TabsComponent
|
||||
]
|
||||
})
|
||||
export class ComponentsModule { }
|
||||
998
src/app/views/components/forms.component.html
Normal file
998
src/app/views/components/forms.component.html
Normal file
@ -0,0 +1,998 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Credit Card</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="ccnumber">Credit Card Number</label>
|
||||
<input type="text" class="form-control" id="ccnumber" placeholder="0000 0000 0000 0000">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccmonth">Month</label>
|
||||
<select class="form-control" id="ccmonth">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
<option>9</option>
|
||||
<option>10</option>
|
||||
<option>11</option>
|
||||
<option>12</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccyear">Year</label>
|
||||
<select class="form-control" id="ccyear">
|
||||
<option>2014</option>
|
||||
<option>2015</option>
|
||||
<option>2016</option>
|
||||
<option>2017</option>
|
||||
<option>2018</option>
|
||||
<option>2019</option>
|
||||
<option>2020</option>
|
||||
<option>2021</option>
|
||||
<option>2022</option>
|
||||
<option>2023</option>
|
||||
<option>2024</option>
|
||||
<option>2025</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="cvv">CVV/CVC</label>
|
||||
<input type="text" class="form-control" id="cvv" placeholder="123">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Company</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company" placeholder="Enter your company name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="vat">VAT</label>
|
||||
<input type="text" class="form-control" id="vat" placeholder="PL1234567890">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="street">Street</label>
|
||||
<input type="text" class="form-control" id="street" placeholder="Enter street name">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-8">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" placeholder="Enter your city">
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="postal-code">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal-code" placeholder="Postal Code">
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="form-group">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country" placeholder="Country name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Basic Form</strong> Elements
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Static</label>
|
||||
<div class="col-md-9">
|
||||
<p class="form-control-static">Username</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input">Text Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="email-input">Email Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="password-input">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password">
|
||||
<span class="help-block">Please enter a complex password</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="disabled-input">Disabled Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="textarea-input">Textarea</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Large</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-lg">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Small</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-sm">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Disabled Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="disabledSelect" class="form-control" disabled>
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="multiple-select">Multiple select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
<option value="4">Option #4</option>
|
||||
<option value="5">Option #5</option>
|
||||
<option value="6">Option #6</option>
|
||||
<option value="7">Option #7</option>
|
||||
<option value="8">Option #8</option>
|
||||
<option value="9">Option #9</option>
|
||||
<option value="10">Option #10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Radios</label>
|
||||
<div class="col-md-9">
|
||||
<div class="radio">
|
||||
<label for="radio1">
|
||||
<input type="radio" id="radio1" name="radios" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio2">
|
||||
<input type="radio" id="radio2" name="radios" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio3">
|
||||
<input type="radio" id="radio3" name="radios" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Radios</label>
|
||||
<div class="col-md-9">
|
||||
<label class="radio-inline" for="inline-radio1">
|
||||
<input type="radio" id="inline-radio1" name="inline-radios" value="option1"> One
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio2">
|
||||
<input type="radio" id="inline-radio2" name="inline-radios" value="option2"> Two
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio3">
|
||||
<input type="radio" id="inline-radio3" name="inline-radios" value="option3"> Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="checkbox">
|
||||
<label for="checkbox1">
|
||||
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox2">
|
||||
<input type="checkbox" id="checkbox2" name="checkbox2" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox3">
|
||||
<input type="checkbox" id="checkbox3" name="checkbox3" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<label class="checkbox-inline" for="inline-checkbox1">
|
||||
<input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1">One
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox2">
|
||||
<input type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2">Two
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox3">
|
||||
<input type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3">Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-input">File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-input" name="file-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-multiple-input">Multiple File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-multiple-input" name="file-multiple-input" multiple>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Inline</strong> Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-email">Email</label>
|
||||
<input type="email" id="if-email" name="if-email" class="form-control" placeholder="Enter Email..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-password">Password</label>
|
||||
<input type="password" id="if-password" name="if-password" class="form-control" placeholder="Enter Password..">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Horizontal</strong> Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-email">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="hf-email" name="hf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-password">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="hf-password" name="hf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Normal</strong> Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<label for="nf-email">Email</label>
|
||||
<input type="email" id="nf-email" name="nf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nf-password">Password</label>
|
||||
<input type="password" id="nf-password" name="nf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Grid</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-5">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-11">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-12">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-user"></i> Login</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Sizes</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-small">Small Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-small" name="input-small" class="form-control form-control-sm" placeholder=".form-control-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-normal">Normal Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-normal" name="input-normal" class="form-control" placeholder="Normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-large">Large Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-large" name="input-large" class="form-control form-control-lg" placeholder=".form-control-lg">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="form-form-control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> with optional icons
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess2">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning2">
|
||||
</div>
|
||||
<div class="form-group has-danger has-feedback">
|
||||
<label class="form-form-control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputError2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group1" name="input2-group1" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-euro"></i></span>
|
||||
<input type="text" id="input3-group1" name="input3-group1" class="form-control" placeholder="..">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Buttons</strong> Groups
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
|
||||
</span>
|
||||
<input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
|
||||
</span>
|
||||
<input type="text" id="input3-group2" name="input3-group2" class="form-control" placeholder="Search">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input1-group3" name="input1-group3" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group3" name="input2-group3" class="form-control" placeholder="Email">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button type="button" dropdownToggle class="btn btn-primary dropdown-toggle dropdown-toggle-split">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Split button!</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input3-group3" name="input3-group3" class="form-control" placeholder="..">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Use the grid for big devices!
|
||||
<small>
|
||||
<code>.col-lg-*</code>
|
||||
<code>.col-md-*</code>
|
||||
<code>.col-sm-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input Grid for small devices!
|
||||
<small>
|
||||
<code>.col-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Username</span>
|
||||
<input type="text" id="username3" name="username3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Email</span>
|
||||
<input type="email" id="email3" name="email3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Password</span>
|
||||
<input type="password" id="password3" name="password3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="text" id="username2" name="username2" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="email" id="email2" name="email2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="password" id="password2" name="password2" class="form-control" placeholder="Password">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-secondary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-success">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-edit"></i>Form Elements
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<a href="#" class="btn-minimize"><i class="icon-arrow-up"></i></a>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text">
|
||||
</div>
|
||||
<p class="help-block">Here's some help text</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInput">Appended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<span class="help-block">Here's more help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedPrependedInput">Append and prepend</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input id="appendedPrependedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButton">Append with button</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButton" class="form-control" size="16" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButtons">Two-button append</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButtons" size="16" class="form-control" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="button">Search</button>
|
||||
<button class="btn btn-secondary" type="button">Options</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn btn-secondary" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/forms.component.ts
Normal file
10
src/app/views/components/forms.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'forms.component.html'
|
||||
})
|
||||
export class FormsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
202
src/app/views/components/modals.component.html
Normal file
202
src/app/views/components/modals.component.html
Normal file
@ -0,0 +1,202 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="myModal.show()">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="largeModal.show()">
|
||||
Launch large modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
|
||||
Launch small modal
|
||||
</button>
|
||||
<hr>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" (click)="primaryModal.show()">
|
||||
Primary modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" (click)="successModal.show()">
|
||||
Success modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" (click)="warningModal.show()">
|
||||
Warning modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" (click)="dangerModal.show()">
|
||||
Danger modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" (click)="infoModal.show()">
|
||||
Info modal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
||||
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #primaryModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-primary" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="primaryModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="primaryModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #successModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-success" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="successModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-success">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-warning" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="warningModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="warningModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-warning">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-danger" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-danger">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #infoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-info" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="infoModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="infoModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-info">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
16
src/app/views/components/modals.component.ts
Normal file
16
src/app/views/components/modals.component.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ModalDirective } from 'ngx-bootstrap/modal';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'modals.component.html'
|
||||
})
|
||||
export class ModalsComponent {
|
||||
public myModal;
|
||||
public largeModal;
|
||||
public smallModal;
|
||||
public primaryModal;
|
||||
public successModal;
|
||||
public warningModal;
|
||||
public dangerModal;
|
||||
public infoModal;
|
||||
}
|
||||
788
src/app/views/components/social-buttons.component.html
Normal file
788
src/app/views/components/social-buttons.component.html
Normal file
@ -0,0 +1,788 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only icons. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook icon" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only text. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook text" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/social-buttons.component.ts
Normal file
10
src/app/views/components/social-buttons.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'social-buttons.component.html'
|
||||
})
|
||||
export class SocialButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
942
src/app/views/components/switches.component.html
Normal file
942
src/app/views/components/switches.component.html
Normal file
@ -0,0 +1,942 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
3d Switch
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-default switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-default switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-default switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-text switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-text switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-text switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-text switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-icon switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-icon switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-icon switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-icon switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative - pills
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="" data-off=""></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Sizes
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-hover table-striped table-align-middle mb-0">
|
||||
<thead>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-lg switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-lg</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-sm switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Extra small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-xs switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/switches.component.ts
Normal file
10
src/app/views/components/switches.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'switches.component.html'
|
||||
})
|
||||
export class SwitchesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
373
src/app/views/components/tables.component.html
Normal file
373
src/app/views/components/tables.component.html
Normal file
@ -0,0 +1,373 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Simple Table
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Samppa Nori</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estavan Lykos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chetan Mohamed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Derick Maximinus</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Friderik Dávid</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Striped Table
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Yiorgos Avraamu</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avram Tarasios</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quintin Ed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Enéas Kwadwo</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agapetus Tadeáš</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Condensed Table
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Carwyn Fachtna</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nehemiah Tatius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebbe Gemariah</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eustorgios Amulius</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Leopold Gáspár</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bordered Table
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Pompeius René</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paĉjo Jadon</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Micheal Mercurius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ganesha Dubhghall</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hiroto Šimun</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Combined All Table
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Vishnu Serghei</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zbyněk Phoibos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Einar Randall</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Félix Troels</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aulus Agmundr</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/tables.component.ts
Normal file
10
src/app/views/components/tables.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tables.component.html'
|
||||
})
|
||||
export class TablesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
69
src/app/views/components/tabs.component.html
Normal file
69
src/app/views/components/tabs.component.html
Normal file
@ -0,0 +1,69 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab heading="Home">
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab heading="Profile">
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab heading="Messages">
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i></ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i></ng-template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i></ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator</ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i> Shoping cart</ng-template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i> Menu <span class="badge badge-success">New</span></ng-template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator <span class="badge badge-pill badge-danger">29</span></ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/views/components/tabs.component.ts
Normal file
10
src/app/views/components/tabs.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tabs.component.html'
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
21
src/app/views/dashboard/dashboard-routing.module.ts
Normal file
21
src/app/views/dashboard/dashboard-routing.module.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes,
|
||||
RouterModule } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: DashboardComponent,
|
||||
data: {
|
||||
title: 'Dashboard'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DashboardRoutingModule {}
|
||||
940
src/app/views/dashboard/dashboard.component.html
Normal file
940
src/app/views/dashboard/dashboard.component.html
Normal file
@ -0,0 +1,940 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card text-white bg-primary">
|
||||
<div class="card-body pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart1Data"
|
||||
[labels]="lineChart1Labels"
|
||||
[options]="lineChart1Options"
|
||||
[colors]="lineChart1Colours"
|
||||
[legend]="lineChart1Legend"
|
||||
[chartType]="lineChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card text-white bg-info">
|
||||
<div class="card-body pb-0">
|
||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
||||
<i class="icon-location-pin"></i>
|
||||
</button>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart2Data"
|
||||
[labels]="lineChart2Labels"
|
||||
[options]="lineChart2Options"
|
||||
[colors]="lineChart2Colours"
|
||||
[legend]="lineChart2Legend"
|
||||
[chartType]="lineChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card text-white bg-warning">
|
||||
<div class="card-body pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart3Data"
|
||||
[labels]="lineChart3Labels"
|
||||
[options]="lineChart3Options"
|
||||
[colors]="lineChart3Colours"
|
||||
[legend]="lineChart3Legend"
|
||||
[chartType]="lineChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card text-white bg-danger">
|
||||
<div class="card-body pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart1Data"
|
||||
[labels]="barChart1Labels"
|
||||
[options]="barChart1Options"
|
||||
[colors]="barChart1Colours"
|
||||
[legend]="barChart1Legend"
|
||||
[chartType]="barChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<h4 class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2015</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-7 hidden-sm-down">
|
||||
<button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="options" id="option1"> Day
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary active">
|
||||
<input type="radio" name="options" id="option2" checked> Month
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="options" id="option3"> Year
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="mainChartData"
|
||||
[labels]="mainChartLabels"
|
||||
[options]="mainChartOptions"
|
||||
[colors]="mainChartColours"
|
||||
[legend]="mainChartLegend"
|
||||
[chartType]="mainChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>40.15%</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.card-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData1"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData2"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData3"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData4"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Traffic & Sales
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-info">
|
||||
<small class="text-muted">New Clients</small>
|
||||
<br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper" style="height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartInfo"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-danger">
|
||||
<small class="text-muted">Recuring Clients</small>
|
||||
<br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper" style="height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartDanger"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars">
|
||||
<li>
|
||||
<div class="title">
|
||||
Monday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Friday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="legend">
|
||||
<span class="badge badge-pill badge-info"></span> <small>New clients</small> <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-warning">
|
||||
<small class="text-muted">Pageviews</small>
|
||||
<br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper" style="height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartWarning"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-success">
|
||||
<small class="text-muted">Organic</small>
|
||||
<br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper" style="height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartSuccess"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<i class="icon-user"></i>
|
||||
<span class="title">Male</span>
|
||||
<span class="value">43%</span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user-female"></i>
|
||||
<span class="title">Female</span>
|
||||
<span class="value">37%</span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<i class="icon-globe"></i>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-facebook"></i>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-twitter"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-linkedin"></i>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="show more"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout">
|
||||
<small class="text-muted">CTR</small>
|
||||
<br>
|
||||
<strong class="h4">23%</strong>
|
||||
<div class="chart-wrapper" style="height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartDefault"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-primary">
|
||||
<small class="text-muted">Bounce Rate</small>
|
||||
<br>
|
||||
<strong class="h4">5%</strong>
|
||||
<div class="chart-wrapper" style="height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartPrimary"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="icons-list">
|
||||
<li>
|
||||
<i class="icon-screen-desktop bg-primary"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iMac 4k</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-info"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Samsung Galaxy Edge</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.224</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iPhone 6S</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.163</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Premium accounts</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>928</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-spotify bg-success"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Spotify Subscriptions</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>893</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cloud-download bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Ebook</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Downloads</div>
|
||||
<strong>121.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-camera bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Photos</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Uploaded</div>
|
||||
<strong>12.125</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<br>
|
||||
<div class="table-responsive"></div>
|
||||
<table class="table table-responsive table-hover table-outline mb-0">
|
||||
<thead class="thead-default">
|
||||
<tr>
|
||||
<th class="text-center"><i class="icon-people"></i></th>
|
||||
<th>User</th>
|
||||
<th class="text-center">Country</th>
|
||||
<th>Usage</th>
|
||||
<th class="text-center">Payment Method</th>
|
||||
<th>Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/1.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/1.jpg">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/USA.png" alt="USA" style="height:24px;" src="assets/img/flags/USA.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>50%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-mastercard" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>10 sec ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/2.jpg">
|
||||
<span class="avatar-status badge-danger"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Avram Tarasios</div>
|
||||
<div class="small text-muted">
|
||||
|
||||
<span>Recurring</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Brazil.png" alt="Brazil" style="height:24px;" src="assets/img/flags/Brazil.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>10%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-visa" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>5 minutes ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/3.jpg">
|
||||
<span class="avatar-status badge-warning"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Quintin Ed</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/India.png" alt="India" style="height:24px;" src="assets/img/flags/India.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>74%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-stripe" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>1 hour ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/4.jpg">
|
||||
<span class="avatar-status badge-default"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Enéas Kwadwo</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/France.png" alt="France" style="height:24px;" src="assets/img/flags/France.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>98%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-paypal" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Last month</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/5.jpg">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Spain.png" alt="Spain" style="height:24px;" src="assets/img/flags/Spain.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>22%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-google-wallet" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Last week</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/6.jpg">
|
||||
<span class="avatar-status badge-danger"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Friderik Dávid</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Poland.png" alt="Poland" style="height:24px;" src="assets/img/flags/Poland.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>43%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-amex" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Yesterday</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
473
src/app/views/dashboard/dashboard.component.ts
Normal file
473
src/app/views/dashboard/dashboard.component.ts
Normal file
@ -0,0 +1,473 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'dashboard.component.html'
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
// constructor( ) { }
|
||||
|
||||
public brandPrimary = '#20a8d8';
|
||||
public brandSuccess = '#4dbd74';
|
||||
public brandInfo = '#63c2de';
|
||||
public brandWarning = '#f8cb00';
|
||||
public brandDanger = '#f86c6b';
|
||||
|
||||
// dropdown buttons
|
||||
public status: { isopen } = { isopen: false };
|
||||
public toggleDropdown($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.status.isopen = !this.status.isopen;
|
||||
}
|
||||
|
||||
// convert Hex to RGBA
|
||||
public convertHex(hex: string, opacity: number) {
|
||||
hex = hex.replace('#', '');
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
|
||||
return rgba;
|
||||
}
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
// lineChart1
|
||||
public lineChart1Data: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart1Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 40 - 5,
|
||||
max: 84 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart1Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart1Legend = false;
|
||||
public lineChart1Type = 'line';
|
||||
|
||||
// lineChart2
|
||||
public lineChart2Data: Array<any> = [
|
||||
{
|
||||
data: [1, 18, 9, 17, 34, 22, 11],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart2Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart2Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 1 - 5,
|
||||
max: 34 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.00001,
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart2Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart2Legend = false;
|
||||
public lineChart2Type = 'line';
|
||||
|
||||
|
||||
// lineChart3
|
||||
public lineChart3Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart3Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart3Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart3Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
}
|
||||
];
|
||||
public lineChart3Legend = false;
|
||||
public lineChart3Type = 'line';
|
||||
|
||||
|
||||
// barChart1
|
||||
public barChart1Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 78, 81, 80, 45, 34, 12, 40, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart1Labels: Array<any> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
|
||||
public barChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart1Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderWidth: 0
|
||||
}
|
||||
];
|
||||
public barChart1Legend = false;
|
||||
public barChart1Type = 'bar';
|
||||
|
||||
// mainChart
|
||||
|
||||
public random(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
public mainChartElements = 27;
|
||||
public mainChartData1: Array<number> = [];
|
||||
public mainChartData2: Array<number> = [];
|
||||
public mainChartData3: Array<number> = [];
|
||||
|
||||
public mainChartData: Array<any> = [
|
||||
{
|
||||
data: this.mainChartData1,
|
||||
label: 'Current'
|
||||
},
|
||||
{
|
||||
data: this.mainChartData2,
|
||||
label: 'Previous'
|
||||
},
|
||||
{
|
||||
data: this.mainChartData3,
|
||||
label: 'BEP'
|
||||
}
|
||||
];
|
||||
/* tslint:disable:max-line-length */
|
||||
public mainChartLabels: Array<any> = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
/* tslint:enable:max-line-length */
|
||||
public mainChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value: any) {
|
||||
return value.charAt(0);
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public mainChartColours: Array<any> = [
|
||||
{ // brandInfo
|
||||
backgroundColor: this.convertHex(this.brandInfo, 10),
|
||||
borderColor: this.brandInfo,
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
},
|
||||
{ // brandSuccess
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
},
|
||||
{ // brandDanger
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5]
|
||||
}
|
||||
];
|
||||
public mainChartLegend = false;
|
||||
public mainChartType = 'line';
|
||||
|
||||
// social box charts
|
||||
|
||||
public socialChartData1: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Facebook'
|
||||
}
|
||||
];
|
||||
public socialChartData2: Array<any> = [
|
||||
{
|
||||
data: [1, 13, 9, 17, 34, 41, 38],
|
||||
label: 'Twitter'
|
||||
}
|
||||
];
|
||||
public socialChartData3: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'LinkedIn'
|
||||
}
|
||||
];
|
||||
public socialChartData4: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Google+'
|
||||
}
|
||||
];
|
||||
|
||||
public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public socialChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public socialChartColours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
}
|
||||
];
|
||||
public socialChartLegend = false;
|
||||
public socialChartType = 'line';
|
||||
|
||||
// sparkline charts
|
||||
|
||||
public sparklineChartData1: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
public sparklineChartData2: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
|
||||
public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public sparklineChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public sparklineChartDefault: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#d1d4d7',
|
||||
}
|
||||
];
|
||||
public sparklineChartPrimary: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandPrimary,
|
||||
}
|
||||
];
|
||||
public sparklineChartInfo: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandInfo,
|
||||
}
|
||||
];
|
||||
public sparklineChartDanger: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
}
|
||||
];
|
||||
public sparklineChartWarning: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandWarning,
|
||||
}
|
||||
];
|
||||
public sparklineChartSuccess: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
public sparklineChartLegend = false;
|
||||
public sparklineChartType = 'line';
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
// generate random values for mainChart
|
||||
for (let i = 0; i <= this.mainChartElements; i++) {
|
||||
this.mainChartData1.push(this.random(50, 200));
|
||||
this.mainChartData2.push(this.random(80, 100));
|
||||
this.mainChartData3.push(65);
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/app/views/dashboard/dashboard.module.ts
Normal file
16
src/app/views/dashboard/dashboard.module.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardRoutingModule } from './dashboard-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
DashboardRoutingModule,
|
||||
ChartsModule,
|
||||
BsDropdownModule
|
||||
],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
3719
src/app/views/icons/font-awesome.component.html
Normal file
3719
src/app/views/icons/font-awesome.component.html
Normal file
File diff suppressed because it is too large
Load Diff
10
src/app/views/icons/font-awesome.component.ts
Normal file
10
src/app/views/icons/font-awesome.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'font-awesome.component.html'
|
||||
})
|
||||
export class FontAwesomeComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
36
src/app/views/icons/icons-routing.module.ts
Normal file
36
src/app/views/icons/icons-routing.module.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { FontAwesomeComponent } from './font-awesome.component';
|
||||
import { SimpleLineIconsComponent } from './simple-line-icons.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Icons'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'font-awesome',
|
||||
component: FontAwesomeComponent,
|
||||
data: {
|
||||
title: 'Font Awesome'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'simple-line-icons',
|
||||
component: SimpleLineIconsComponent,
|
||||
data: {
|
||||
title: 'Simple Line Icons'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class IconsRoutingModule {}
|
||||
15
src/app/views/icons/icons.module.ts
Normal file
15
src/app/views/icons/icons.module.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FontAwesomeComponent } from './font-awesome.component';
|
||||
import { SimpleLineIconsComponent } from './simple-line-icons.component';
|
||||
|
||||
import { IconsRoutingModule } from './icons-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [ IconsRoutingModule ],
|
||||
declarations: [
|
||||
FontAwesomeComponent,
|
||||
SimpleLineIconsComponent
|
||||
]
|
||||
})
|
||||
export class IconsModule { }
|
||||
561
src/app/views/icons/simple-line-icons.component.html
Normal file
561
src/app/views/icons/simple-line-icons.component.html
Normal file
@ -0,0 +1,561 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-picture-o"></i> Simple Line Icons
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row text-center">
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/views/icons/simple-line-icons.component.ts
Normal file
10
src/app/views/icons/simple-line-icons.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'simple-line-icons.component.html'
|
||||
})
|
||||
export class SimpleLineIconsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Edit Employee {{Name}}
|
||||
</div>
|
||||
<form>
|
||||
<div class="container">
|
||||
<h4>Personal Details</h4>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="fname">First Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="fname" placeholder="Enter First name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="lname">Last Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="lname" placeholder="Enter Last name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pmobile">Primary Mobile Number <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pmobile" placeholder="Enter Primary Mobile Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="smobile">Scondary Mobile Number</label>
|
||||
<input type="text" class="form-control" id="smobile" placeholder="Enter Secondary Mobile Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="email">Email <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="email" placeholder="Enter Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="fatherName">Father Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="fatherName" placeholder="Enter Father Name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="motherName">Mother Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="motherName" placeholder="Enter Mother Name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="dob">Date Of Birth <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="dob" placeholder="Enter DOB">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="gender">Gender <span class="danger">*</span></label>
|
||||
<!--<input type="text" class="form-control" id="gender" placeholder="Enter Gender">-->
|
||||
<label class="radio" for="gender">
|
||||
<input type="radio" id="gender-male" name="inline-radios" value="Male"> Male
|
||||
</label>
|
||||
<label class="radio" for="inline-radio2">
|
||||
<input type="radio" id="gender-female" name="inline-radios" value="Female"> Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="adhar">Adhar Number <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="adhar" placeholder="Enter Adhar Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="qualification">Qualification</label>
|
||||
<input type="text" class="form-control" id="qualification" placeholder="Enter Qualification">
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="premanentAddress">Premanent Address <span class="danger">*</span></label>
|
||||
<textarea class="form-control" id="premanentAddress" placeholder="Enter Permanent Address"></textarea>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="currentAddress">Current Address <span class="danger">*</span></label>
|
||||
<textarea class="form-control" id="currentAddress" placeholder="Enter Current Address"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h4>Role Details</h4>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="doj">Date Of Joining<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="doj" placeholder="Enter DOJ">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="role">Role <span class="danger">*</span></label>
|
||||
<!--<input type="text" class="form-control" id="role" placeholder="Enter Role">-->
|
||||
<select class="form-control" id="role" placeholder="Select Role">
|
||||
<option disabled>Select Role</option>
|
||||
<option>Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="jobResponsibilities">Job Responsibilities</label>
|
||||
<textarea class="form-control" id="jobResponsibilities" placeholder="Enter Job Responsibilities">
|
||||
Finance details check
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
Active/De-Active : <label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-employee',
|
||||
templateUrl: 'edit-employee.component.html'
|
||||
})
|
||||
export class EditEmployeeComponent implements OnInit, OnDestroy {
|
||||
|
||||
constructor() { }
|
||||
ngOnInit(){
|
||||
}
|
||||
ngOnDestroy(): void {
|
||||
//Called once, before the instance is destroyed.
|
||||
//Add 'implements OnDestroy' to the class.
|
||||
// alert('on destroy');
|
||||
}
|
||||
}
|
||||
234
src/app/views/masters/employee/employee.component.html
Normal file
234
src/app/views/masters/employee/employee.component.html
Normal file
@ -0,0 +1,234 @@
|
||||
<span *ngIf="show" class="backToList">
|
||||
|
||||
<a (click)="show = !show;" tooltip="Go to listing">Back to List</a>
|
||||
|
||||
</span>
|
||||
<div class="col-lg-12" *ngIf="!show">
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading> Employee List</ng-template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Employee List
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<input id="search" class="form-control" type="text" placeholder="search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<table class="table table-bordered table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>EmployeeID</th>
|
||||
<th>Name</th>
|
||||
<th>Mobile Number</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let emp of employees">
|
||||
<td>{{emp.empId}}</td>
|
||||
<td>{{emp.name}}</td>
|
||||
<td>{{emp.mobile}}</td>
|
||||
<td>{{emp.role}}</td>
|
||||
<td>
|
||||
<span *ngIf="emp.status == 1" class="badge badge-success">Active</span>
|
||||
<span *ngIf="emp.status == 0" class="badge badge-danger">In-Active</span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fa fa-edit" tooltip="Edit" (click)="editEmployee()"></i> |
|
||||
<i class="fa fa-eye" tooltip="View More" data-toggle="modal" (click)="myModal.show(); getModelWindowDetails(emp)"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading> Add Employee</ng-template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Personal Details
|
||||
</div>
|
||||
<form>
|
||||
<fieldset>
|
||||
<!--<legend>Personal Details</legend>-->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="fname">First Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="fname" placeholder="Enter First name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="lname">Last Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="lname" placeholder="Enter Last name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pmobile">Primary Mobile Number <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pmobile" placeholder="Enter Primary Mobile Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="smobile">Secondary Mobile Number</label>
|
||||
<input type="text" class="form-control" id="smobile" placeholder="Enter Secondary Mobile Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="email">Email <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="email" placeholder="Enter Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="fatherName">Father Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="fatherName" placeholder="Enter Father Name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="motherName">Mother Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="motherName" placeholder="Enter Mother Name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="dob">Date Of Birth <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="dob" placeholder="Enter DOB">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="gender">Gender <span class="danger">*</span></label>
|
||||
<!--<input type="text" class="form-control" id="gender" placeholder="Enter Gender">-->
|
||||
<label class="radio" for="gender">
|
||||
<input type="radio" id="gender-male" name="inline-radios" value="Male"> Male
|
||||
</label>
|
||||
<label class="radio" for="inline-radio2">
|
||||
<input type="radio" id="gender-female" name="inline-radios" value="Female"> Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="adhar">Aadhar Number <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="adhar" placeholder="Enter Aadhar Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="qualification">Qualification</label>
|
||||
<input type="text" class="form-control" id="qualification" placeholder="Enter Qualification">
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="premanentAddress">Premanent Address <span class="danger">*</span></label>
|
||||
<textarea class="form-control" id="premanentAddress" placeholder="Enter Permanent Address"></textarea>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="currentAddress">Current Address <span class="danger">*</span></label>
|
||||
<textarea class="form-control" id="currentAddress" placeholder="Enter Current Address"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="card-header">
|
||||
Role Details
|
||||
</div>
|
||||
<fieldset>
|
||||
<!--<legend>Role Details</legend>-->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="doj">Date Of Joining<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="doj" placeholder="Enter DOJ">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="role">Role <span class="danger">*</span></label>
|
||||
<!--<input type="text" class="form-control" id="role" placeholder="Enter Role">-->
|
||||
<select class="form-control" id="role" placeholder="Select Role">
|
||||
<option disabled>Select Role</option>
|
||||
<option>Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="jobResponsibilities">Job Responsibilities</label>
|
||||
<textarea class="form-control" id="jobResponsibilities" placeholder="Enter Job Responsibilities"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
Active/De-Active : <label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="card-footer" align="right">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
|
||||
<app-edit-employee *ngIf="show"></app-edit-employee>
|
||||
|
||||
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document" *ngIf="myModalData">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ myModalData.empId }}</h4>
|
||||
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label><b>Name : </b> </label> {{myModalData.name}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label><b>Mobile : </b> </label> {{myModalData.mobile}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label><b>Role : </b> </label> {{myModalData.role}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
|
||||
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- /.modal -->
|
||||
7
src/app/views/masters/employee/employee.component.scss
Normal file
7
src/app/views/masters/employee/employee.component.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.backToList{
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.backToList:hover {
|
||||
color: blue;
|
||||
}
|
||||
47
src/app/views/masters/employee/employee.component.ts
Normal file
47
src/app/views/masters/employee/employee.component.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalDirective } from 'ngx-bootstrap/modal';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'employee.component.html',
|
||||
styleUrls:['./employee.component.scss']
|
||||
})
|
||||
export class EmployeeComponent implements OnInit {
|
||||
show = false;
|
||||
closed = false;
|
||||
public myModal;
|
||||
public myModalData;
|
||||
employees: any;
|
||||
constructor() { }
|
||||
ngOnInit(){
|
||||
this.employees = [
|
||||
{
|
||||
empId: '0001',
|
||||
name: 'xyz',
|
||||
mobile: '+919876543210',
|
||||
role: 'ADMIN',
|
||||
status: '1'
|
||||
},
|
||||
{
|
||||
empId: '0002',
|
||||
name: 'xss',
|
||||
mobile: '+911234567890',
|
||||
role: 'MANAGER',
|
||||
status: '1'
|
||||
},
|
||||
{
|
||||
empId: '0003',
|
||||
name: 'fys',
|
||||
mobile: '+911234567890',
|
||||
role: 'STAFF',
|
||||
status: '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
getModelWindowDetails(emp) {
|
||||
this.myModalData = emp||null;
|
||||
}
|
||||
|
||||
editEmployee(){
|
||||
this.show = !this.show;
|
||||
}
|
||||
}
|
||||
44
src/app/views/masters/masters-routing.module.ts
Normal file
44
src/app/views/masters/masters-routing.module.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { EmployeeComponent } from './employee/employee.component';
|
||||
import { RoleComponent } from './role/role.component';
|
||||
import { StudyCenterComponent } from './study-center/study-center.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Masters'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'employee',
|
||||
component: EmployeeComponent,
|
||||
data: {
|
||||
title: 'Employee'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
component: RoleComponent,
|
||||
data: {
|
||||
title: 'Role'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'studyCenter',
|
||||
component: StudyCenterComponent,
|
||||
data: {
|
||||
title: 'Study Center'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MastersRoutingModule {}
|
||||
41
src/app/views/masters/masters.module.ts
Normal file
41
src/app/views/masters/masters.module.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
// import { BrowserModule } from '@angular/platform-browser';
|
||||
// Tabs Component
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
||||
import { ModalModule } from 'ngx-bootstrap/modal';
|
||||
|
||||
import { MastersRoutingModule } from './masters-routing.module';
|
||||
// Role
|
||||
import { RoleComponent } from './role/role.component';
|
||||
import { EditRoleComponent } from './role/edit-role/edit-role.component';
|
||||
|
||||
// Employee
|
||||
import { EmployeeComponent } from './employee/employee.component';
|
||||
import { EditEmployeeComponent } from './employee/edit-employee/edit-employee.component';
|
||||
|
||||
// Study Center
|
||||
import { StudyCenterComponent } from './study-center/study-center.component';
|
||||
import { EditStudyCenterComponent } from './study-center/edit-study-center/edit-study-center.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
TabsModule,
|
||||
ModalModule.forRoot(),
|
||||
TooltipModule,
|
||||
MastersRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
RoleComponent,
|
||||
EditRoleComponent,
|
||||
EmployeeComponent,
|
||||
EditEmployeeComponent,
|
||||
StudyCenterComponent,
|
||||
EditStudyCenterComponent
|
||||
]
|
||||
})
|
||||
export class MastersModule { }
|
||||
@ -0,0 +1,59 @@
|
||||
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Edit Role Details</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 col-form-label" for="text-input">Name of the Role</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="text-input" name="text-input" class="form-control" [(ngModel)]="roleName" placeholder="Text">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 col-form-label" for="textarea-input">Role Description</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" [(ngModel)]="roleDescription" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 col-form-label">Option Menu's</label>
|
||||
<div class="col-md-9 col-form-label">
|
||||
<div class="form-check" *ngFor="let nav of navListDetails; let i = index">
|
||||
<input class="form-check-input" [checked]="nav.isActive" [disabled]="nav.isDisabled" type="checkbox" value="option1" (change)="nav.isActive = $event.target.checked" (click)="checkChild(i, nav ,$event.target.checked)" id="{{nav.id}}">
|
||||
<label class="form-check-label" for="{{nav.id}}">
|
||||
{{nav.name | uppercase}}
|
||||
</label>
|
||||
<div *ngIf="nav.children && nav.isActive" class="form-group row">
|
||||
<!--<label class="col-md-3 col-form-label">Sub Menu's</label>-->
|
||||
<div class="col-md-12 col-form-label">
|
||||
<div class="form-check form-check-inline mr-1" *ngFor="let child of nav.children">
|
||||
<input class="form-check-input" [checked]="child.isActive" [disabled]="child.isDisabled" type="checkbox" id="{{child.id}}" value="option1" (change)="child.isActive = $event.target.checked">
|
||||
<label class="form-check-label" for="{{child.id}}">{{child.name | uppercase}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<button (click)="updateRoleMaster()" tooltip="update">Click</button>-->
|
||||
</div>
|
||||
<pre>{{checkedNavDetails | json}}</pre>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
</div>
|
||||
26
src/app/views/masters/role/edit-role/edit-role.component.ts
Normal file
26
src/app/views/masters/role/edit-role/edit-role.component.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { Component, OnInit, Input, OnChanges } from '@angular/core';
|
||||
import { RoleService } from './../../../../service/role/role.service';
|
||||
// import { ListRoleComponent } from './../list-role/list-role.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-role',
|
||||
templateUrl: './edit-role.component.html',
|
||||
// styleUrls: ['./edit-role-details.component.scss']
|
||||
})
|
||||
export class EditRoleComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input() nav;
|
||||
navListDetails: any;
|
||||
public roleName : string;
|
||||
public roleDescription: string;
|
||||
public checkedNavDetails = [];
|
||||
constructor(private roleService: RoleService) {
|
||||
}
|
||||
|
||||
ngOnChanges(){
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
}
|
||||
110
src/app/views/masters/role/role.component.html
Normal file
110
src/app/views/masters/role/role.component.html
Normal file
@ -0,0 +1,110 @@
|
||||
<span *ngIf="show" class="backToList">
|
||||
<a (click)="show = !show;" tooltip="Go to listing">Back to List</a>
|
||||
</span>
|
||||
|
||||
<div class="col-md-12 mb-4" *ngIf="!show">
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading> Role List</ng-template>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4" *ngFor="let role of listRole">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ role.role }}
|
||||
<span class="badge badge-success float-right" title="Edit {{role.role}}" (click)="show = !show; roleId = role">Edit</span>
|
||||
</div>
|
||||
<div class="card-body display-container">
|
||||
<div class="display-flex-container">
|
||||
<label class="flex-item-name">role</label>
|
||||
<span class="flex-item-value">{{ role.role }}</span>
|
||||
</div>
|
||||
<div class="display-flex-container">
|
||||
<label class="flex-item-name">status</label>
|
||||
<span class="flex-item-value">{{ role.status }}</span>
|
||||
</div>
|
||||
<div class="display-flex-container">
|
||||
<label class="flex-item-name">description</label>
|
||||
<span class="flex-item-value">{{ role.description }}</span>
|
||||
</div>
|
||||
<div class="display-flex-container">
|
||||
<label class="flex-item-name">nav details</label>
|
||||
<span class="flex-item-value">
|
||||
<ul>
|
||||
<li *ngFor="let nav of role.nav" [style.color]="nav.isActive == 1 ? 'green': 'gray'">
|
||||
{{nav.name}}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading> Add Role</ng-template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong> Create New Role</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 col-form-label" for="text-input">Name of the Role <span class="danger">*</span></label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="text-input" name="text-input" class="form-control" [(ngModel)]="roleName" placeholder="Text">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 col-form-label" for="textarea-input">Role Description <span class="danger">*</span></label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" [(ngModel)]="roleDescription" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 col-form-label">Option Menu's <span class="danger">*</span></label>
|
||||
<div class="col-md-9 col-form-label">
|
||||
<div class="form-check" *ngFor="let nav of navListDetails; let i = index">
|
||||
<input class="form-check-input" [checked]="nav.isActive" [disabled]="nav.isDisabled" type="checkbox" value="option1" (change)="nav.isActive = $event.target.checked"
|
||||
(click)="checkChild(i, nav ,$event.target.checked)" id="{{nav.id}}">
|
||||
<label class="form-check-label" for="{{nav.id}}">
|
||||
{{nav.name | uppercase}}
|
||||
</label> <span *ngIf="!nav.children"> Read/Write </span>
|
||||
<div *ngIf="nav.children && nav.isActive" class="form-group row">
|
||||
<!--<label class="col-md-3 col-form-label">Sub Menu's</label>-->
|
||||
<div class="col-md-12 col-form-label">
|
||||
<div class="form-check form-check-inline mr-1" *ngFor="let child of nav.children">
|
||||
<input class="form-check-input" [checked]="child.isActive" [disabled]="child.isDisabled" type="checkbox" id="{{child.id}}"
|
||||
value="option1" (change)="child.isActive = $event.target.checked">
|
||||
<label class="form-check-label" for="{{child.id}}">{{child.name | uppercase}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<button (click)="addRoleMasterDetails()">Click</button>-->
|
||||
</div>
|
||||
<pre>{{checkedNavDetails | json}}</pre>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer" align="right">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<app-edit-role *ngIf="show" [nav]="roleId"></app-edit-role>
|
||||
26
src/app/views/masters/role/role.component.scss
Normal file
26
src/app/views/masters/role/role.component.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.backToList{
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.backToList:hover {
|
||||
color: blue;
|
||||
}
|
||||
.display-container {
|
||||
overflow: auto;
|
||||
max-height: 220px;
|
||||
}
|
||||
.display-flex-container{
|
||||
display: flex;
|
||||
}
|
||||
.flex-item-name {
|
||||
flex: 2;
|
||||
}
|
||||
.flex-item-value {
|
||||
flex: 3;
|
||||
}
|
||||
.close-button:hover {
|
||||
width: 120px;
|
||||
height:120px;
|
||||
background: lightgray;
|
||||
border-radius: 50px;
|
||||
}
|
||||
32
src/app/views/masters/role/role.component.ts
Normal file
32
src/app/views/masters/role/role.component.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { RoleService } from './../../../service/role/role.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'role.component.html',
|
||||
styleUrls:['./role.component.scss']
|
||||
})
|
||||
export class RoleComponent implements OnInit {
|
||||
listRole: any;
|
||||
show = false;
|
||||
closed = false;
|
||||
|
||||
constructor(private roleService: RoleService) { }
|
||||
ngOnInit(){
|
||||
this.getRoleDetails();
|
||||
}
|
||||
getRoleDetails(){
|
||||
this.roleService.getRoleDetails().subscribe(data =>{
|
||||
this.listRole = data.data;
|
||||
});
|
||||
}
|
||||
|
||||
navListDetails = [{
|
||||
name: 'Dashboard'
|
||||
},
|
||||
{
|
||||
name: 'Masters'
|
||||
},
|
||||
{
|
||||
name: 'Daybook'
|
||||
}]
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Edit Study Center Details</legend>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="name"> Study Center Code <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter Study Center Code" value="000211">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="name"> Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter Name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pNumber">Phone Number<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pNumber" placeholder="Enter Phone Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pNumber">Email<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="email" placeholder="Enter Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="contactPerson"> Contact Person <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="contactPerson" placeholder="Enter Contact Person">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="mobile"> Mobile Number</label>
|
||||
<input type="text" class="form-control" id="mobile" placeholder="Enter Mobile Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="email">Email <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="email" placeholder="Enter Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="city">City<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="city" placeholder="Enter City">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="state">State<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="state" placeholder="Enter State">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pincode">Pin Code<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pincode" placeholder="Enter PinCode">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="premanentAddress">Full Contact Address <span class="danger">*</span></label>
|
||||
<textarea class="form-control" id="premanentAddress" placeholder="Enter Full Contact Address"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,11 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-study-center',
|
||||
templateUrl: 'edit-study-center.component.html',
|
||||
})
|
||||
export class EditStudyCenterComponent implements OnInit {
|
||||
constructor() { }
|
||||
ngOnInit(){
|
||||
}
|
||||
}
|
||||
183
src/app/views/masters/study-center/study-center.component.html
Normal file
183
src/app/views/masters/study-center/study-center.component.html
Normal file
@ -0,0 +1,183 @@
|
||||
<span *ngIf="show" class="backToList">
|
||||
<a (click)="show = !show;" tooltip="Go to listing">Back to List</a>
|
||||
</span>
|
||||
<div class="col-lg-12" *ngIf="!show">
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading> Study Center List</ng-template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Study Center List
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<input id="search" class="form-control" type="text" placeholder="search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<table class="table table-bordered table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Study Center Code</th>
|
||||
<th>Study Center Name</th>
|
||||
<th>Contact Person</th>
|
||||
<th>Mobile Number</th>
|
||||
<th>Status</th>
|
||||
<th>Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let stuCent of studyCenterDetails">
|
||||
<td>{{stuCent.stdyId}}</td>
|
||||
<td>{{stuCent.name}}</td>
|
||||
<td>{{stuCent.contactPerson}}</td>
|
||||
<td>{{stuCent.mobile}}</td>
|
||||
<td>
|
||||
<span *ngIf="stuCent.status == 1" class="badge badge-success">Active</span>
|
||||
<span *ngIf="stuCent.status == 0" class="badge badge-danger">In-Active</span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fa fa-edit" tooltip="Edit" (click)="editStudyCenter()"></i> |
|
||||
<i class="fa fa-eye" tooltip="View More" data-toggle="modal" (click)="myModal.show(); getModelWindowDetails(stuCent)"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading> Add Study Center</ng-template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Study Center Details
|
||||
</div>
|
||||
<form>
|
||||
<fieldset>
|
||||
<!--<legend>Study Center Details</legend>-->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="name"> Name <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter Name">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pNumber">Phone Number<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pNumber" placeholder="Enter Phone Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pNumber">Email<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="email" placeholder="Enter Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="city">City<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="city" placeholder="Enter City">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="state">State<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="state" placeholder="Enter State">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="pincode">Pin Code<span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pincode" placeholder="Enter PinCode">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="premanentAddress">Full Contact Address <span class="danger">*</span></label>
|
||||
<textarea class="form-control" id="premanentAddress" placeholder="Enter Full Contact Address"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
Contact Person Details
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="contactPerson"> Contact Person <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="contactPerson" placeholder="Enter Contact Person">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="mobile"> Mobile Number</label>
|
||||
<input type="text" class="form-control" id="mobile" placeholder="Enter Mobile Number">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="email">Email <span class="danger">*</span></label>
|
||||
<input type="text" class="form-control" id="email" placeholder="Enter Email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="card-footer" align="right">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
|
||||
<app-edit-study-center *ngIf="show"></app-edit-study-center>
|
||||
|
||||
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document" *ngIf="myModalData">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{ myModalData.stdyId }}</h4>
|
||||
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label><b> Study Center Name : </b> </label> {{myModalData.name}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label><b>Mobile : </b> </label> {{myModalData.mobile}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label><b> Contact Person Name : </b> </label> {{myModalData.contactPerson}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
|
||||
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- /.modal -->
|
||||
@ -0,0 +1,7 @@
|
||||
.backToList{
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.backToList:hover {
|
||||
color: blue;
|
||||
}
|
||||
47
src/app/views/masters/study-center/study-center.component.ts
Normal file
47
src/app/views/masters/study-center/study-center.component.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'study-center.component.html',
|
||||
styleUrls:['./study-center.component.scss']
|
||||
})
|
||||
export class StudyCenterComponent implements OnInit {
|
||||
show = false;
|
||||
closed = false;
|
||||
public myModal;
|
||||
public myModalData;
|
||||
studyCenterDetails: any;
|
||||
constructor() { }
|
||||
ngOnInit(){
|
||||
this.studyCenterDetails = [
|
||||
{
|
||||
stdyId: '0001',
|
||||
name: 'xyz',
|
||||
contactPerson: 'sss',
|
||||
mobile: '+919876543210',
|
||||
status: '1'
|
||||
},
|
||||
{
|
||||
stdyId: '0002',
|
||||
name: 'xss',
|
||||
contactPerson: 'mmm',
|
||||
mobile: '+911234567890',
|
||||
status: '1'
|
||||
},
|
||||
{
|
||||
stdyId: '0003',
|
||||
name: 'fys',
|
||||
contactPerson: 'vvv',
|
||||
mobile: '+911234567890',
|
||||
status: '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
getModelWindowDetails(stuCent) {
|
||||
this.myModalData = stuCent||null;
|
||||
}
|
||||
editStudyCenter(){
|
||||
this.show = !this.show;
|
||||
}
|
||||
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user