Apollo-DEC/apollostudycenter
Apollo-DEC/apollostudycenter
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create study center project

Browse Source
This commit is contained in:
gandhimathi 2018-07-31 11:14:51 +05:30
parent 4d7dae6ec5
commit bdf5f20812
554 changed files with 43001 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.editorconfig Normal file
View 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
View 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

132
angular.json Executable file
View 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 Executable file
View 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 Executable file
View 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();
}
}

12
e2e/tsconfig.e2e.json Executable file
View File

@ -0,0 +1,12 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types":[
"jasmine",
"node"
]
}
}

42
karma.conf.js Executable file
View 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
});
};

10590
package-lock.json generated Executable file
View File

File diff suppressed because it is too large Load Diff

61
package.json Executable file
View File

@ -0,0 +1,61 @@
{
"name": "apollo",
"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 Executable file
View 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 Executable file
View File

32
src/app/app.component.spec.ts Executable file
View 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 Executable file
View 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 { }

74
src/app/app.module.ts Executable file
View File

@ -0,0 +1,74 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
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 { ChartsModule } from 'ng2-charts/ng2-charts';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule
],
declarations: [
AppComponent,
...APP_CONTAINERS,
...APP_COMPONENTS,
...APP_DIRECTIVES,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }

81
src/app/app.routing.ts Executable file
View File

@ -0,0 +1,81 @@
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: 'master',
loadChildren: './views/master/master.module#MasterModule',
},
{
path: 'shareallotment',
loadChildren: './views/fees-share-allotment/fees-share-allotment.module#FeesShareAllotmentModule',
},
{
path: 'feescalculator',
loadChildren: './views/fees-calculator/fees-calculator.module#FeesCalculatorModule',
},
{
path: 'receivefees',
loadChildren: './views/fees-details/fees-details.module#FeesDetailsModule',
},
]
},
{
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 Executable file
View 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>&nbsp; 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i>&nbsp; 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>&nbsp; 4 - 5pm</small>
<small class="text-muted"><i class="icon-social-skype"></i>&nbsp; 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>&nbsp; 10 - 11pm</small>
<small class="text-muted"><i class="icon-home"></i>&nbsp; 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>&nbsp; 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i>&nbsp; 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>&nbsp; 4 - 6pm</small>
<small class="text-muted"><i class="icon-home"></i>&nbsp; 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 Executable file
View 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 Executable file
View File

@ -0,0 +1 @@
export * from './app-aside.component';

46
src/app/components/app-breadcrumbs/app-breadcrumbs.component.ts Executable file
View File

@ -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 Executable file
View File

@ -0,0 +1 @@
export * from './app-breadcrumbs.component';

4
src/app/components/app-footer/app-footer.component.html Executable file
View File

@ -0,0 +1,4 @@
<footer class="app-footer">
<!-- <a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs. -->
<span class="float-right">Powered by <a href="http://apollodec.com">Apollo</a></span>
</footer>

9
src/app/components/app-footer/app-footer.component.ts Executable file
View 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 Executable file
View File

@ -0,0 +1 @@
export * from './app-footer.component';

22
src/app/components/app-header/app-header.component.html Executable file
View File

@ -0,0 +1,22 @@
<header class="app-header navbar">
<button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler d-md-down-none" type="button" appSidebarToggler>&#9776;</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 Executable file
View 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 Executable file
View File

@ -0,0 +1 @@
export * from './app-header.component';

87
src/app/components/app-sidebar/app-sidebar.component.html Executable file
View File

@ -0,0 +1,87 @@
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<!-- <li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
</li>
<li class="divider"></li>
<li class="nav-title">
UI Elements
</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 <span class="badge badge-info">NEW</span></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="divider"></li>
<li class="nav-title">
Extras
</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> -->
<li class="divider"></li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/shareallotment']"><i class="icon-pie-chart"></i> Share Allocate</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/feescalculator']"><i class="icon-calculator"></i> Fees Calculator</a>
</li>
</ul>
</nav>
</div>

9
src/app/components/app-sidebar/app-sidebar.component.ts Executable file
View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './app-sidebar.component.html'
})
export class AppSidebar {
ngOnInit(): void {}
}

1
src/app/components/app-sidebar/index.ts Executable file
View File

@ -0,0 +1 @@
export * from './app-sidebar.component';

5
src/app/components/index.ts Executable file
View 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 Executable file
View 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> &nbsp;Dashboard</a>
<a class="btn" href="#"><i class="icon-settings"></i> &nbsp;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 Executable file
View 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 Executable file
View File

@ -0,0 +1 @@
export * from './full-layout.component';

2
src/app/containers/index.ts Executable file
View File

@ -0,0 +1,2 @@
export * from './full-layout';
export * from './simple-layout';

1
src/app/containers/simple-layout/index.ts Executable file
View File

@ -0,0 +1 @@
export * from './simple-layout.component';

0
src/app/containers/simple-layout/simple-layout.component.html Executable file
View File

12
src/app/containers/simple-layout/simple-layout.component.ts Executable file
View 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 Executable file
View 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 Executable file
View File

@ -0,0 +1 @@
export * from './aside.directive';

3
src/app/directives/index.ts Executable file
View File

@ -0,0 +1,3 @@
export * from './aside';
export * from './nav-dropdown';
export * from './sidebar';

1
src/app/directives/nav-dropdown/index.ts Executable file
View File

@ -0,0 +1 @@
export * from './nav-dropdown.directive';

31
src/app/directives/nav-dropdown/nav-dropdown.directive.ts Executable file
View 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 Executable file
View File

@ -0,0 +1 @@
export * from './sidebar.directive';

93
src/app/directives/sidebar/sidebar.directive.ts Executable file
View 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
];

20
src/app/views/chartjs/chartjs-routing.module.ts Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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>&nbsp; Primary</button>
<button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</button>
<button type="button" class="btn btn-success"><i class="fa fa-magic"></i>&nbsp; Success</button>
<button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</button>
<button type="button" class="btn btn-danger"><i class="fa fa-rss"></i>&nbsp; Danger</button>
<button type="button" class="btn btn-link"><i class="fa fa-link"></i>&nbsp; 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>&nbsp; Primary</button>
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</button>
<button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i>&nbsp; Success</button>
<button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</button>
<button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i>&nbsp; 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</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 Executable file
View 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 Executable file
View 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">&lt;button class="btn btn-facebook" type="button"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</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">&lt;button class="btn btn-facebook icon" type="button"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</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">&lt;button class="btn btn-facebook text" type="button"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</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 Executable file
View 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 Executable file
View 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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;
<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="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-secondary">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-success">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-warning">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-info">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-danger">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></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="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-secondary">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-success">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-warning">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-info">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-danger">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></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="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-secondary-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-success-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-warning-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-info-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-danger-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></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="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-secondary-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-success-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-warning-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-info-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-danger-outline">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></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="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-secondary-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-success-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-warning-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-info-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-danger-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></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="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-success-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-info-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></span>
<span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" data-on="&#xf00c;" data-off="&#xf00d;"></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 Executable file
View 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 Executable file
View 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 Executable file
View 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 Executable file
View 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 &nbsp;<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 &nbsp;<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 Executable file
View 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 Executable file
View 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 Executable file
View 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 &amp; 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> &nbsp; <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 Executable file
View 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 Executable file
View 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 { }

18
src/app/views/fees-calculator/fees-calculator-routing.module.ts Executable file
View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeesCalculatorComponent } from './fees-calculator.component';
const routes: Routes = [
{
path: '',
component: FeesCalculatorComponent,
data: {
title: "Fees Calculator"
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeesCalculatorRoutingModule { }

151
src/app/views/fees-calculator/fees-calculator.component.html Executable file
View File

@ -0,0 +1,151 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-md-12">
<div class="card">
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<div class="card-header">
<i class="fa fa-calculator"></i> Calculate Fees Details
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3">
<label for="university">University <span class="symbol required"></span></label>
<select class="form-control" id="university">
<!-- <option>Select University</option> -->
<option>Anna University</option>
<option>SRM University</option>
<option>Karpagam University</option>
<option>Hindustan University</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="course">Course <span class="symbol required"></span></label>
<select class="form-control" id="course">
<!-- <option>Select Course</option> -->
<option>CB001-Information Technology</option>
<option>CHE002-Computer Science And Engg</option>
<option>L0022-Fashion Technology</option>
<option>MP0200-Mechanical Engg</option>
</select>
</div>
<div class="form-group col-sm-3 ">
<label for="semyear">Sem/Year <span class="symbol required"></span></label>
<select class="form-control" id="semyear">
<!-- <option>Select Sem/Year</option> -->
<option>SEM1</option>
<option>SEM2</option>
<option>SEM3</option>
<option>SEM4</option>
<option>SEM5</option>
<option>SEM6</option>
<option>SEM7</option>
<option>SEM8</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="new">No Of New Applicants <span class="symbol required"></span></label>
<input type="text" class="form-control" value="10" id="new" placeholder="Enter new applicants">
</div>
<div class="form-group col-sm-3">
<label for="old">No Of Re-registered Applicants <span class="symbol required"></span></label>
<input type="text" value="20" class="form-control" id="old" placeholder="Enter registerd applicants">
</div>
<div class="form-group col-sm-3 serachBtn">
<button type="button" class="btn btn-sm btn-primary" (click)="viewCalScreen()"><i class="fa fa-search"></i> Search</button>
</div>
</div><!--/.row-->
<div class="row" *ngIf="showSecondCard">
<div class="col-lg-9 col-xs-9">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Fees Type</th>
<th>Fees Amount * No of New Applicant</th>
<th>Fees Amount * No of Re-registerd Applicant</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tuition Fees</td>
<td>
<span>15000 * 10 = 150000</span>
</td>
<td>
<span>15000 * 20 = 300000</span>
</td>
<td>
<span>450000</span>
</td>
</tr>
<tr>
<td>Exam Fees</td>
<td>
<span>2000 * 10 = 20000</span>
</td>
<td>
<span>2000 * 20 = 400000</span>
</td>
<td>
<span>420000</span>
</td>
</tr>
<tr>
<td>Late Fees</td>
<td>
<span>1000 * 10 = 10000</span>
</td>
<td>
<span>1000 * 20 = 20000</span>
</td>
<td>
<span>30000</span>
</td>
</tr>
<tr>
<td>Other Fees</td>
<td>
<span>500 * 10 = 5000</span>
</td>
<td>
<span>0 * 20 = 0</span>
</td>
<td>
<span>5000</span>
</td>
</tr>
<tr>
<td>Total</td>
<td>
<span>185000</span>
</td>
<td>
<span>720000</span>
</td>
<td>
<span>905000</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--/.col-->
</div>
<!--/.row-->
</div>
<!-- <div class="card-footer">
<div class="col-lg-12 col-xs-12 endBtn" align="right">
<button type="button" class="btn btn-sm btn-danger" (click)="closeCalScreen()"><i class="fa fa-close"></i> Close</button>
</div>
</div> -->
</form>
</div>
</div>
</div><!--/.row-->
</div>

25
src/app/views/fees-calculator/fees-calculator.component.scss Executable file
View File

@ -0,0 +1,25 @@
// .card{
// border-radius: 10px;
// }
// .btn{
// border-radius: 10px;
// }
// .card-footer{
// border-bottom-left-radius: 10px;
// border-bottom-right-radius: 10px;
// // background-color: transparent;
// }
// .card-header{
// border-top-left-radius: 10px;
// border-top-right-radius: 10px;
// // background-color: transparent;
// }
// form input symbol
.symbol.required:before {
content: "*";
display: inline;
color: #f86c6b;
}
.serachBtn {
margin-top: 29px;
}

25
src/app/views/fees-calculator/fees-calculator.component.spec.ts Executable file
View File

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

25
src/app/views/fees-calculator/fees-calculator.component.ts Executable file
View File

@ -0,0 +1,25 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-fees-calculator',
templateUrl: './fees-calculator.component.html',
styleUrls: ['./fees-calculator.component.scss']
})
export class FeesCalculatorComponent implements OnInit {
showSecondCard: boolean;
constructor() {
this.showSecondCard=false;
}
ngOnInit() {
}
// open fees calculator screen
viewCalScreen(){
this.showSecondCard=true;
}
// close fees calculator screen
closeCalScreen(){
this.showSecondCard=false;
}
}

13
src/app/views/fees-calculator/fees-calculator.module.spec.ts Executable file
View File

@ -0,0 +1,13 @@
import { FeesCalculatorModule } from './fees-calculator.module';
describe('FeesCalculatorModule', () => {
let feesCalculatorModule: FeesCalculatorModule;
beforeEach(() => {
feesCalculatorModule = new FeesCalculatorModule();
});
it('should create an instance', () => {
expect(feesCalculatorModule).toBeTruthy();
});
});

14
src/app/views/fees-calculator/fees-calculator.module.ts Executable file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeesCalculatorRoutingModule } from './fees-calculator-routing.module';
import { FeesCalculatorComponent } from './fees-calculator.component';
@NgModule({
imports: [
CommonModule,
FeesCalculatorRoutingModule
],
declarations: [FeesCalculatorComponent]
})
export class FeesCalculatorModule { }

227
src/app/views/fees-details/edit-receive-fees/edit-receive-fees.component.html Executable file
View File

@ -0,0 +1,227 @@
<div class="animated fadeIn" *ngIf="!hideFeesAllocateC">
<form action="" method="post" class="form-horizontal">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Manually Change Allocated Student Fees Details
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3">
<label for="editstudycenter">Study Center <span class="symbol required"></span></label>
<select class="form-control" id="editstudycenter" disabled>
<!-- <option>Select Study Center</option> -->
<option>CHE001-Chennai</option>
<option>CBE002-Coimbatore</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="edituniversity">University</label>
<select class="form-control" id="edituniversity" disabled>
<!-- <option>Select University</option> -->
<option>Anna University</option>
<option>SRM University</option>
<option>Karpagam University</option>
<option>Hindustan University</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="billNo">Bill No </label>
<input type="text" class="form-control" id="billNo" value="CHE-00001" placeholder="Enter bill no" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editbillAmount">Bill Amount <span class="symbol required"></span></label>
<input type="text" value="200000" class="form-control" id="editbillAmount" placeholder="Enter bill amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="receivedAmount">Received Amount <span class="symbol required"></span></label>
<input type="text" value="200000" class="form-control" id="receivedAmount" placeholder="Enter received amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="advanceAmount">Advance Amount <span class="symbol required"></span></label>
<input type="text" value="0" class="form-control" id="advanceAmount" placeholder="Enter advance amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editreceiptNo">Receipt No </label>
<input type="text" class="form-control" id="editreceiptNo" placeholder="Enter receipt no" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editpaymentMode">Mode Of Payment <span class="symbol required"></span></label>
<select class="form-control" id="editpaymentMode" disabled>
<!-- <option>Select Payment</option> -->
<option>CASH</option>
<option>CHEQUE</option>
<option>ONLINE TRANSACTION</option>
<option>CREDIT / DEBIT CARD</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="editcomments">Comments <span class="symbol required"></span></label>
<textarea maxlength="100" placeholder="Enter Comments" class="form-control" name="editcomments" id="editcomments" readonly></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Form Id</th>
<th>Student Name</th>
<th>Payable Amount</th>
<th>Paid Amount</th>
<th>Balance Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="checkbox">
<label for="checkbox1">
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1" checked>
</label>
</span> &nbsp;
<a title="Click to view student course details">Form001</a></td>
<td>
<span>Preetha - Srinivasan</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox2">
<input type="checkbox" id="checkbox1" name="checkbox2" value="option2" checked>
</label>
</span> &nbsp;
<a title="Click to view student course details">Form002</a>
</td>
<td>
<span>Ram - Ganesh</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox3">
<input type="checkbox" id="checkbox1" name="checkbox3" value="option3" checked>
</label>
</span> &nbsp;
<a title="Click to view student course details">Form003</a>
</td>
<td>
<span>Moorthy - Saminathan</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox4">
<input type="checkbox" id="checkbox4" name="checkbox4" value="option4" checked>
</label>
</span> &nbsp;
<a title="Click to view student course details">Form004</a>
</td>
<td>
<span>Mohan - Saravanan</span>
</td>
<td>
<span>100000</span>
</td>
<td>
<span>75000</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>Partially Paid</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox5">
<input type="checkbox" id="checkbox5" name="checkbox5" value="option5">
</label>
</span> &nbsp;
<a title="Click to view student course details">Form005</a>
</td>
<td>
<span>Renu - Sathish</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>Pending</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--/.col-->
</div>
</div>
<div class="card-footer">
<div class="col-lg-12 col-xs-12 endBtn" align="right">
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
<button type="button" class="btn btn-sm btn-danger" (click)="cancel()"><i class="fa fa-ban"></i> Cancel</button>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</form>
</div>
<app-fees-details *ngIf="hideFeesAllocateC"></app-fees-details>

16
src/app/views/fees-details/edit-receive-fees/edit-receive-fees.component.scss Executable file
View File

@ -0,0 +1,16 @@
// form input symbol
.symbol.required:before {
content: "*";
display: inline;
color: #f86c6b;
}
.endBtn {
padding-right: 0px;
}
saveBtnDiv {
margin-top: 28px;
}
a:hover {
cursor:pointer;
}

25
src/app/views/fees-details/edit-receive-fees/edit-receive-fees.component.spec.ts Executable file
View File

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

21
src/app/views/fees-details/edit-receive-fees/edit-receive-fees.component.ts Executable file
View File

@ -0,0 +1,21 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-edit-receive-fees',
templateUrl: './edit-receive-fees.component.html',
styleUrls: ['./edit-receive-fees.component.scss']
})
export class EditReceiveFeesComponent implements OnInit {
hideFeesAllocateC: boolean;
constructor() {
this.hideFeesAllocateC= false;
}
ngOnInit() {
}
cancel() {
this.hideFeesAllocateC= true;
}
}

203
src/app/views/fees-details/edit-refund-fees-details/edit-refund-fees-details.component.html Executable file
View File

@ -0,0 +1,203 @@
<div class="animated fadeIn" *ngIf="!hideEditRefundFeesC">
<form action="" method="post" class="form-horizontal">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Manually Change Allocated Student Fees Details
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3">
<label for="editRefundastudycenter">Study Center <span class="symbol required"></span></label>
<select class="form-control" id="editRefundastudycenter" disabled>
<!-- <option>Select Study Center</option> -->
<option>CHE001-Chennai</option>
<option>CBE002-Coimbatore</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="editRefundauniversity">University</label>
<select class="form-control" id="editRefundauniversity" disabled>
<!-- <option>Select University</option> -->
<option>Anna University</option>
<option>SRM University</option>
<option>Karpagam University</option>
<option>Hindustan University</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="editRefundabillNo">Bill No </label>
<input type="text" class="form-control" id="editRefundabillNo" value="CHE-00002" placeholder="Enter bill no" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editRefundabillAmount">Bill Amount <span class="symbol required"></span></label>
<input type="text" value="100000" class="form-control" id="editRefundabillAmount" placeholder="Enter bill amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editRefundareceivedAmount">Refund Received Amount <span class="symbol required"></span></label>
<input type="text" value="50000" class="form-control" id="editRefundareceivedAmount" placeholder="Enter received amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editRefundadvanceAmount">Advance Amount <span class="symbol required"></span></label>
<input type="text" value="0" class="form-control" id="editRefundadvanceAmount" placeholder="Enter advance amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editRefundreceiptNo">Receipt No </label>
<input type="text" class="form-control" id="editRefundreceiptNo" placeholder="Enter receipt no" readonly>
</div>
<div class="form-group col-sm-3">
<label for="editpaymentMode">Mode Of Payment <span class="symbol required"></span></label>
<select class="form-control" id="editpaymentMode" disabled>
<!-- <option>Select Payment</option> -->
<option>CASH</option>
<option>CHEQUE</option>
<option>ONLINE TRANSACTION</option>
<option>CREDIT / DEBIT CARD</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="editRefundcomments">Comments <span class="symbol required"></span></label>
<textarea maxlength="100" placeholder="Enter Comments" class="form-control" name="editRefundcomments" id="editRefundcomments" readonly></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Form Id</th>
<th>Student Name</th>
<th>Payable Amount</th>
<th>Paid Amount</th>
<th>Balance Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="checkbox">
<label for="checkbox1">
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1" checked>
</label>
</span> &nbsp;
<a title="Click to view student course details">Form006</a></td>
<td>
<span>Preetha - Srinivasan</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox2">
<input type="checkbox" id="checkbox1" name="checkbox2" value="option2" checked>
</label>
</span> &nbsp;
<a title="Click to view student course details">Form002</a>
</td>
<td>
<span>Ram - Ganesh</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox3">
<input type="checkbox" id="checkbox1" name="checkbox3" value="option3">
</label>
</span> &nbsp;
<a title="Click to view student course details">Form008</a>
</td>
<td>
<span>Moorthy - Saminathan</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>Pending</span>
</td>
</tr>
<tr>
<td>
<span class="checkbox">
<label for="checkbox4">
<input type="checkbox" id="checkbox4" name="checkbox4" value="option4">
</label>
</span> &nbsp;
<a title="Click to view student course details">Form009</a>
</td>
<td>
<span>Mohan - Saravanan</span>
</td>
<td>
<span>100000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>100000</span>
</td>
<td>
<span>Pending</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--/.col-->
</div>
</div>
<div class="card-footer">
<div class="col-lg-12 col-xs-12 endBtn" align="right">
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
<button type="button" class="btn btn-sm btn-danger" (click)="cancel()"><i class="fa fa-ban"></i> Cancel</button>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</form>
</div>
<app-fees-details *ngIf="hideEditRefundFeesC"></app-fees-details>

16
src/app/views/fees-details/edit-refund-fees-details/edit-refund-fees-details.component.scss Executable file
View File

@ -0,0 +1,16 @@
// form input symbol
.symbol.required:before {
content: "*";
display: inline;
color: #f86c6b;
}
.endBtn {
padding-right: 0px;
}
saveBtnDiv {
margin-top: 28px;
}
a:hover {
cursor:pointer;
}

25
src/app/views/fees-details/edit-refund-fees-details/edit-refund-fees-details.component.spec.ts Executable file
View File

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

20
src/app/views/fees-details/edit-refund-fees-details/edit-refund-fees-details.component.ts Executable file
View File

@ -0,0 +1,20 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-edit-refund-fees-details',
templateUrl: './edit-refund-fees-details.component.html',
styleUrls: ['./edit-refund-fees-details.component.scss']
})
export class EditRefundFeesDetailsComponent implements OnInit {
hideEditRefundFeesC: boolean;
constructor() {
this.hideEditRefundFeesC=false;
}
ngOnInit() {
}
cancel() {
this.hideEditRefundFeesC=true;
}
}

19
src/app/views/fees-details/fees-details-routing.module.ts Executable file
View File

@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeesDetailsComponent } from './fees-details.component';
const routes: Routes = [
{
path: '',
component: FeesDetailsComponent,
data: {
title: "Fees Receive/Refund"
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeesDetailsRoutingModule { }

331
src/app/views/fees-details/fees-details.component.html Executable file
View File

@ -0,0 +1,331 @@
<div class="animated fadeIn" *ngIf="!hideFeesDetailsC">
<!--/.row-->
<div class="row">
<!--/.col-->
<div class="col-md-12 mb-4">
<!-- Nav tabs -->
<tabset>
<tab>
<ng-template tabHeading> View Received Fees</ng-template>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> View Received Fees Details
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3 ">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
</div>
</div>
<div class="form-group col-sm-3">
<select class="form-control" id="studycenter">
<option>Select Study Center</option>
<option>CHE001-Chennai</option>
<option>CBE002-Coimbatore</option>
</select>
</div>
<div class="form-group col-sm-3 ">
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12 col-xs-12">
<table class="table table-bordered table-responsive table-hover">
<thead>
<tr>
<th>Bill No</th>
<th>Receipt No</th>
<th>Bill Amount </th>
<th>Received Amount</th>
<th>Advance Amount</th>
<th>Received On</th>
<th>Mode Of Payment</th>
<th>Study Center</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>CHE-00001</td>
<td></td>
<td>200000</td>
<td>200000</td>
<td><a title="Click to refund amount" (click)="refundFees()">0</a></td>
<td>14-07-2019</td>
<td>CASH</td>
<td>Chennai</td>
<td>
<a (click)="editFees()"><i class="fa fa-pencil-square-o"></i></a>
&nbsp;&nbsp;
<a (click)="viewFeesDetailsModal.show()"><i class="fa fa-eye"></i></a>
</td>
</tr>
<tr>
<td>CHE-00002</td>
<td></td>
<td>100000</td>
<td>50000</td>
<td><a title="Click to refund amount" (click)="refundFees()">50000</a></td>
<td>14-07-2019</td>
<td>CASH</td>
<td>Coimbatore</td>
<td>
<a><i class="fa fa-pencil-square-o" (click)="editFees()"></i></a>
&nbsp;&nbsp;
<a (click)="viewFeesDetailsModal.show()"><i class="fa fa-eye"></i></a>
</td>
</tr>
<tr>
<td>CHE-00005</td>
<td></td>
<td>400000</td>
<td>400000</td>
<td><a title="Click to refund amount" (click)="refundFees()">0</a></td>
<td>14-07-2019</td>
<td>CASH</td>
<td>Salem</td>
<td>
<a><i class="fa fa-pencil-square-o" (click)="editFees()"></i></a>
&nbsp;&nbsp;
<a (click)="viewFeesDetailsModal.show()"><i class="fa fa-eye"></i></a>
</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>
<!--/.col-->
</div>
<!--/.row-->
</div>
</div>
</div><!--/.col-->
</div>
</tab>
<tab>
<ng-template tabHeading> Add Receive Fees</ng-template>
<div class="col-md-12">
<form action="" method="post" class="form-horizontal">
<div class="form-group row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Add Receive Fees For Study Center
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3">
<label for="addstudycenter">Study Center <span class="symbol required"></span></label>
<select class="form-control" id="addstudycenter">
<!-- <option>Select Study Center</option> -->
<option>CHE001-Chennai</option>
<option>CBE002-Coimbatore</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="adduniversity">University</label>
<select class="form-control" id="adduniversity">
<!-- <option>Select University</option> -->
<option>Anna University</option>
<option>SRM University</option>
<option>Karpagam University</option>
<option>Hindustan University</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="receiptNo">Receipt No </label>
<input type="text" class="form-control" id="receiptNo" placeholder="Enter receipt no">
</div>
<div class="form-group col-sm-3">
<label for="billDate">Bill Date <span class="symbol required"></span></label>
<input type="date" class="form-control" id="billDate" placeholder="dd-mm-yyyy" style="display: block;">
</div>
<div class="form-group col-sm-3">
<label for="billAmount">Bill Amount <span class="symbol required"></span></label>
<input type="text" value="200000" class="form-control" id="billAmount" placeholder="Enter bill amount">
</div>
<div class="form-group col-sm-3">
<label for="paymentMode">Mode Of Payment <span class="symbol required"></span></label>
<select class="form-control" id="paymentMode">
<!-- <option>Select Payment</option> -->
<option>CASH</option>
<option>CHEQUE</option>
<option>ONLINE TRANSACTION</option>
<option>CREDIT / DEBIT CARD</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="comments">Comments <span class="symbol required"></span></label>
<textarea maxlength="100" placeholder="Enter Comments" class="form-control" name="comments" id="comments" ></textarea>
</div>
</div>
</div>
<div class="card-footer">
<div class="col-lg-12 col-xs-12 endBtn" align="right">
<button type="button" class="btn btn-sm btn-success" (click)="saveFees()"><i class="fa fa-plus"></i> Save</button>&nbsp;
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div> </tab>
</tabset>
</div><!--/.col-->
</div>
<!--/.row-->
</div>
<app-edit-receive-fees *ngIf="showFeesAllocateC"></app-edit-receive-fees>
<app-refund-fees-details *ngIf="showFeesRefundC"></app-refund-fees-details>
<!-- view fees details modal-->
<div bsModal #viewFeesDetailsModal="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">
<h5 class="modal-title">Bill No: CHE-00001 Details</h5>
<button type="button btn-dark" class="close" (click)="viewFeesDetailsModal.hide()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Form Id</th>
<th>Student Name</th>
<th>Payable Amount</th>
<th>Paid Amount</th>
<th>Balance Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>Form001</span>
</td>
<td>
<span>Preetha - Srinivasan</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span>Form002</span>
</td>
<td>
<span>Ram - Ganesh</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span>Form003</span>
</td>
<td>
<span>Moorthy - Saminathan</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>50000</span>
</td>
<td>
<span>0</span>
</td>
<td>
<span>Paid</span>
</td>
</tr>
<tr>
<td>
<span>Form004</span>
</td>
<td>
<span>Mohan - Saravanan</span>
</td>
<td>
<span>100000</span>
</td>
<td>
<span>75000</span>
</td>
<td>
<span>25000</span>
</td>
<td>
<span>Partially Paid</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--/.col-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="viewFeesDetailsModal.hide()">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- end fees detailsmodal -->

16
src/app/views/fees-details/fees-details.component.scss Executable file
View File

@ -0,0 +1,16 @@
// form input symbol
.symbol.required:before {
content: "*";
display: inline;
color: #f86c6b;
}
.endBtn {
padding-right: 0px;
}
saveBtnDiv {
margin-top: 28px;
}
a:hover {
cursor:pointer;
}

25
src/app/views/fees-details/fees-details.component.spec.ts Executable file
View File

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

34
src/app/views/fees-details/fees-details.component.ts Executable file
View File

@ -0,0 +1,34 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-fees-details',
templateUrl: './fees-details.component.html',
styleUrls: ['./fees-details.component.scss']
})
export class FeesDetailsComponent implements OnInit {
hideFeesDetailsC: boolean;
showFeesAllocateC: boolean;
showFeesRefundC: boolean;
constructor() {
this.showFeesAllocateC= false;
this.showFeesRefundC= false;
this.hideFeesDetailsC= false;
}
ngOnInit() {
}
saveFees() {
this.showFeesAllocateC= true;
this.hideFeesDetailsC= true;
}
editFees() {
this.showFeesAllocateC= true;
this.hideFeesDetailsC= true;
}
refundFees() {
this.showFeesRefundC= true;
this.hideFeesDetailsC= true;
}
}

13
src/app/views/fees-details/fees-details.module.spec.ts Executable file
View File

@ -0,0 +1,13 @@
import { FeesDetailsModule } from './fees-details.module';
describe('FeesDetailsModule', () => {
let feesDetailsModule: FeesDetailsModule;
beforeEach(() => {
feesDetailsModule = new FeesDetailsModule();
});
it('should create an instance', () => {
expect(feesDetailsModule).toBeTruthy();
});
});

19
src/app/views/fees-details/fees-details.module.ts Executable file
View File

@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Modal Component
import { ModalModule } from 'ngx-bootstrap/modal';
// Tabs Component
import { TabsModule } from 'ngx-bootstrap/tabs';
import { FeesDetailsRoutingModule } from './fees-details-routing.module';
import { FeesDetailsComponent } from './fees-details.component';
import { EditReceiveFeesComponent } from './edit-receive-fees/edit-receive-fees.component';
import { RefundFeesDetailsComponent } from './refund-fees-details/refund-fees-details.component';
import { EditRefundFeesDetailsComponent } from './edit-refund-fees-details/edit-refund-fees-details.component';
@NgModule({
imports: [
CommonModule,
FeesDetailsRoutingModule, TabsModule, ModalModule.forRoot()
],
declarations: [FeesDetailsComponent, EditReceiveFeesComponent, RefundFeesDetailsComponent, EditRefundFeesDetailsComponent]
})
export class FeesDetailsModule { }

52
src/app/views/fees-details/refund-fees-details/refund-fees-details.component.html Executable file
View File

@ -0,0 +1,52 @@
<div class="animated fadeIn" *ngIf="!hideRefundFeesC">
<form action="" method="post" class="form-horizontal">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Fees Refund From Paid Details
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3">
<label for="refundstudycenter">Study Center <span class="symbol required"></span></label>
<select class="form-control" id="refundstudycenter" disabled>
<!-- <option>Select Study Center</option> -->
<option>CHE001-Chennai</option>
<option>CBE002-Coimbatore</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="refundadvanceAmount">Advance Amount <span class="symbol required"></span></label>
<input type="text" value="50000" class="form-control" id="advanceAmount" placeholder="Enter advance amount" readonly>
</div>
<div class="form-group col-sm-3">
<label for="refunduniversity">University</label>
<select class="form-control" id="refunduniversity">
<option>Anna University</option>
<option>SRM University</option>
<option>Karpagam University</option>
<option>Hindustan University</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="refundAmount">Refund Amount <span class="symbol required"></span></label>
<input type="text" value="50000" class="form-control" id="refundAmount" placeholder="Enter refund amount">
</div>
</div>
</div>
<div class="card-footer">
<div class="col-lg-12 col-xs-12 endBtn" align="right">
<button type="button" class="btn btn-sm btn-success" (click)="refund()"><i class="fa fa-plus-circle"></i> Save</button>&nbsp;
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</form>
</div>
<app-edit-refund-fees-details *ngIf="hideRefundFeesC"></app-edit-refund-fees-details>

16
src/app/views/fees-details/refund-fees-details/refund-fees-details.component.scss Executable file
View File

@ -0,0 +1,16 @@
// form input symbol
.symbol.required:before {
content: "*";
display: inline;
color: #f86c6b;
}
.endBtn {
padding-right: 0px;
}
saveBtnDiv {
margin-top: 28px;
}
a:hover {
cursor:pointer;
}

25
src/app/views/fees-details/refund-fees-details/refund-fees-details.component.spec.ts Executable file
View File

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

19
src/app/views/fees-details/refund-fees-details/refund-fees-details.component.ts Executable file
View File

@ -0,0 +1,19 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-refund-fees-details',
templateUrl: './refund-fees-details.component.html',
styleUrls: ['./refund-fees-details.component.scss']
})
export class RefundFeesDetailsComponent implements OnInit {
hideRefundFeesC: boolean;
constructor() {
this.hideRefundFeesC= false;
}
ngOnInit() {
}
refund() {
this.hideRefundFeesC= true;
}
}

18
src/app/views/fees-share-allotment/fees-share-allotment-routing.module.ts Executable file
View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeesShareAllotmentComponent } from './fees-share-allotment.component';
const routes: Routes = [
{
path: '',
component: FeesShareAllotmentComponent,
data: {
title: "Share Allocate"
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeesShareAllotmentRoutingModule { }

124
src/app/views/fees-share-allotment/fees-share-allotment.component.html Executable file
View File

@ -0,0 +1,124 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-md-12">
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> View Share Allocate Details
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-sm-3 ">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Search">
</div>
</div>
<div class="form-group col-sm-3">
<select class="form-control" id="university">
<option>Select University</option>
<option>Anna University</option>
<option>SRM University</option>
<option>Karpagam University</option>
<option>Hindustan University</option>
</select>
</div>
<div class="form-group col-sm-3 ">
<select class="form-control" id="course">
<option>Select Course</option>
<option>CB001-Information Technology</option>
<option>CHE002-Computer Science And Engg</option>
<option>L0022-Fashion Technology</option>
<option>MP0200-Mechanical Engg</option>
</select>
</div>
<div class="form-group col-sm-3 ">
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i> Search</button>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12 col-xs-12">
<table class="table table-bordered table-responsive table-hover">
<thead>
<tr>
<th>Study Center</th>
<th>University</th>
<th>Course</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chennai</td>
<td>Anna University</td>
<td>Information Technology</td>
<td>
<span class="badge badge-success">10</span>
</td>
</tr>
<tr>
<td>Chennai</td>
<td>SRM University</td>
<td>Fashion Technology</td>
<td>
<span class="badge badge-success">15</span>
</td>
</tr>
<tr>
<td>Chennai</td>
<td>Karpagam University</td>
<td>Computer Science And Engg</td>
<td>
<span class="badge badge-success">10</span>
</td>
</tr>
<tr>
<td>Chennai</td>
<td>Anna University</td>
<td>Fashion Technology</td>
<td>
<span class="badge badge-success">10</span>
</td>
</tr>
<tr>
<td>Chennai</td>
<td>Hindustan University</td>
<td >Mechanical Engg</td>
<td>
<span class="badge badge-success">10</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>
<!--/.col-->
</div>
<!--/.row-->
</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>
</form>
</div><!--/.col-->
</div><!--/.row-->
</div>

5
src/app/views/fees-share-allotment/fees-share-allotment.component.scss Executable file
View File

@ -0,0 +1,5 @@
.symbol.required:before {
content: "*";
display: inline;
color: #f86c6b;
}

25
src/app/views/fees-share-allotment/fees-share-allotment.component.spec.ts Executable file
View File

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

Some files were not shown because too many files have changed in this diff Show More