FRONTEND REMOVED
This commit is contained in:
velz
parent
c4ba394f15
commit
89b120f3af
@ -1,13 +0,0 @@
|
||||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
41
sineedge_front/.gitignore
vendored
41
sineedge_front/.gitignore
vendored
@ -1,41 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
#System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,170 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"optima": {
|
||||
"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",
|
||||
"src/favicon.ico"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/quill/dist/quill.snow.css",
|
||||
"node_modules/dragula/dist/dragula.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/angular-calendar/scss/angular-calendar.scss",
|
||||
"node_modules/@swimlane/ngx-datatable/release/index.css",
|
||||
"node_modules/@swimlane/ngx-datatable/release/themes/material.css",
|
||||
"src/assets/fonts/pe/css/pe-icon-set-weather.css",
|
||||
"src/assets/fonts/data-table/icons.css",
|
||||
"src/assets/styles/app.scss",
|
||||
"src/assets/cropper/cropper.css",
|
||||
"src/assets/glyphicons/glyphicons.css",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||
"node_modules/simple-line-icons/scss/simple-line-icons.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/jquery/dist/jquery.min.js",
|
||||
"node_modules/tether/dist/js/tether.min.js",
|
||||
"node_modules/hammerjs/hammer.min.js",
|
||||
"node_modules/sortablejs/Sortable.js",
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"src/assets/cropper/cropper.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": "optima:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "optima:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "optima: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/jquery/dist/jquery.min.js",
|
||||
"node_modules/tether/dist/js/tether.min.js",
|
||||
"node_modules/hammerjs/hammer.min.js",
|
||||
"node_modules/sortablejs/Sortable.js",
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"src/assets/cropper/cropper.js"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/quill/dist/quill.snow.css",
|
||||
"node_modules/dragula/dist/dragula.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/angular-calendar/scss/angular-calendar.scss",
|
||||
"node_modules/@swimlane/ngx-datatable/release/index.css",
|
||||
"node_modules/@swimlane/ngx-datatable/release/themes/material.css",
|
||||
"src/assets/fonts/pe/css/pe-icon-set-weather.css",
|
||||
"src/assets/fonts/data-table/icons.css",
|
||||
"src/assets/styles/app.scss",
|
||||
"src/assets/cropper/cropper.css",
|
||||
"src/assets/glyphicons/glyphicons.css",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||
"node_modules/simple-line-icons/scss/simple-line-icons.scss"
|
||||
],
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"optima-e2e": {
|
||||
"root": "",
|
||||
"sourceRoot": "",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "optima:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "optima",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { PrimerPage } from './app.po';
|
||||
|
||||
describe('primer App', function() {
|
||||
let page: PrimerPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new PrimerPage();
|
||||
});
|
||||
|
||||
it('should expect true to be true', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
export class PrimerPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016"
|
||||
],
|
||||
"outDir": "../dist/out-tsc-e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
// 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
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
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
|
||||
});
|
||||
};
|
||||
10993
sineedge_front/package-lock.json
generated
10993
sineedge_front/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,86 +0,0 @@
|
||||
{
|
||||
"name": "optima",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.0.0-beta.2",
|
||||
"@angular/animations": "^6.0.0-rc.5",
|
||||
"@angular/cdk": "^6.0.0-rc.5",
|
||||
"@angular/common": "^6.0.0-rc.5",
|
||||
"@angular/compiler": "^6.0.0-rc.5",
|
||||
"@angular/core": "^6.0.0-rc.5",
|
||||
"@angular/flex-layout": "2.0.0-beta.10",
|
||||
"@angular/forms": "^6.0.0-rc.5",
|
||||
"@angular/http": "^6.0.0-rc.5",
|
||||
"@angular/material": "^6.0.0-rc.5",
|
||||
"@angular/platform-browser": "^6.0.0-rc.5",
|
||||
"@angular/platform-browser-dynamic": "^6.0.0-rc.5",
|
||||
"@angular/router": "^6.0.0-rc.5",
|
||||
"@swimlane/ngx-charts": "^7.0.1",
|
||||
"@swimlane/ngx-datatable": "11.1.5",
|
||||
"@types/aws-sdk": "^2.7.0",
|
||||
"amazon-cognito-identity-js": "^2.0.21",
|
||||
"angular-calendar": "0.23.3",
|
||||
"angular-sortablejs": "^2.0.6",
|
||||
"angular-tree-component": "6.1.0",
|
||||
"aws-sdk": "^2.300.0",
|
||||
"chart.js": "2.6.0",
|
||||
"core-js": "^2.5.5",
|
||||
"d3": "^4.9.1",
|
||||
"dragula": "3.7.2",
|
||||
"font-awesome": "4.7.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"intl": "^1.2.4",
|
||||
"jquery": "3.2.1",
|
||||
"karma-jasmine": "^1.1.1",
|
||||
"leaflet": "^1.0.2",
|
||||
"moment": "^2.15.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ng2-dragula": "1.3.1",
|
||||
"ng2-file-upload": "1.2.1",
|
||||
"ng2-translate": "5.0.0",
|
||||
"ng2-validation": "4.2.0",
|
||||
"ngx-color-picker": "^4.0.3",
|
||||
"ngx-perfect-scrollbar": "5.0.0-7",
|
||||
"node-sass": "^4.9.3",
|
||||
"perfect-scrollbar": "^1.3.0",
|
||||
"quill": "^1.2.0",
|
||||
"rxjs": "^6.0.0-uncanny-rc.7",
|
||||
"rxjs-compat": "^6.0.0-uncanny-rc.7",
|
||||
"screenfull": "^3.2.2",
|
||||
"simple-line-icons": "^2.4.1",
|
||||
"sortablejs": "^1.6.0",
|
||||
"tether": "^1.4.0",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.6.1",
|
||||
"@angular/cli": "^6.1.5",
|
||||
"@angular/compiler-cli": "^6.0.0-rc.5",
|
||||
"@types/jasmine": "2.5.52",
|
||||
"@types/jquery": "3.2.0",
|
||||
"@types/node": "^8.10.27",
|
||||
"codelyzer": "~4.1.0",
|
||||
"jasmine-core": "2.6.3",
|
||||
"jasmine-spec-reporter": "4.1.0",
|
||||
"karma": "1.7.0",
|
||||
"karma-chrome-launcher": "2.1.1",
|
||||
"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": "~5.0.0",
|
||||
"tslint": "~5.9.1",
|
||||
"typescript": "2.7.2"
|
||||
}
|
||||
}
|
||||
@ -1,644 +0,0 @@
|
||||
{
|
||||
"name": "ng5",
|
||||
"firstRun": false,
|
||||
"exportConfig": true,
|
||||
"fileConfigs": [
|
||||
{
|
||||
"path": "src/assets/styles/app.scss",
|
||||
"configJson": "{\"forceCompile\":false,\"customOutput\":\"../../../../../../../../../Desktop/app.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}"
|
||||
}
|
||||
],
|
||||
"fileTree": {
|
||||
"expandedDirs": [
|
||||
"src",
|
||||
"src/assets",
|
||||
"src/assets/styles"
|
||||
],
|
||||
"hideSystemFiles": true,
|
||||
"systemFiles": [
|
||||
".*",
|
||||
"desktop.ini",
|
||||
"prepros.config",
|
||||
"$RECYCLE.BIN",
|
||||
"prepros.cfg",
|
||||
"prepros-6.config",
|
||||
"Prepros Export"
|
||||
],
|
||||
"hideUnwatchedFiles": false
|
||||
},
|
||||
"imports": [
|
||||
{
|
||||
"path": "src/assets/styles/app.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/_material.themes.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/_core.scss",
|
||||
"src/assets/styles/scss/_material.scss",
|
||||
"src/assets/styles/scss/utilities/utilities.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss",
|
||||
"src/assets/styles/scss/core/_scaffolding.scss",
|
||||
"src/assets/styles/scss/core/_typography.scss",
|
||||
"src/assets/styles/scss/core/_main-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_main-header.scss",
|
||||
"src/assets/styles/scss/core/_main-panel.scss",
|
||||
"src/assets/styles/scss/core/_notification-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_sessions.scss",
|
||||
"src/assets/styles/scss/components/_perfect-scrollbar.scss",
|
||||
"src/assets/styles/scss/components/_table.scss",
|
||||
"src/assets/styles/scss/components/_custom.scss",
|
||||
"src/assets/styles/scss/material/_buttons.scss",
|
||||
"src/assets/styles/scss/material/_cards.scss",
|
||||
"src/assets/styles/scss/material/_dialog.scss",
|
||||
"src/assets/styles/scss/material/_lists.scss",
|
||||
"src/assets/styles/scss/material/_select.scss",
|
||||
"src/assets/styles/scss/material/_menus.scss",
|
||||
"src/assets/styles/scss/material/_tabs.scss",
|
||||
"src/assets/styles/scss/utilities/_background.scss",
|
||||
"src/assets/styles/scss/utilities/_general.scss",
|
||||
"src/assets/styles/scss/utilities/_spacing.scss",
|
||||
"src/assets/styles/scss/utilities/_text.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/chat/chat.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_chat.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/fullcalendar/fullcalendar.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_calendar.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/mail/mail.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_messages.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/social/social.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_social.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/forms/editor/editor.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_editor.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/forms/form-tree/form-tree.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_treeview.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/forms/form-upload/form-upload.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_upload.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/maps/map-google/map-google.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/_core.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/core/_scaffolding.scss",
|
||||
"src/assets/styles/scss/core/_typography.scss",
|
||||
"src/assets/styles/scss/core/_main-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_main-header.scss",
|
||||
"src/assets/styles/scss/core/_main-panel.scss",
|
||||
"src/assets/styles/scss/core/_notification-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_sessions.scss",
|
||||
"src/assets/styles/scss/components/_perfect-scrollbar.scss",
|
||||
"src/assets/styles/scss/components/_table.scss",
|
||||
"src/assets/styles/scss/components/_custom.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/_material.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/material/_buttons.scss",
|
||||
"src/assets/styles/scss/material/_cards.scss",
|
||||
"src/assets/styles/scss/material/_dialog.scss",
|
||||
"src/assets/styles/scss/material/_lists.scss",
|
||||
"src/assets/styles/scss/material/_select.scss",
|
||||
"src/assets/styles/scss/material/_menus.scss",
|
||||
"src/assets/styles/scss/material/_tabs.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/_mixins.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_calendar.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_chat.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_editor.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_messages.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_pricing.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_social.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_timeline.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_treeview.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_upload.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/utilities/utilities.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/utilities/_background.scss",
|
||||
"src/assets/styles/scss/utilities/_general.scss",
|
||||
"src/assets/styles/scss/utilities/_spacing.scss",
|
||||
"src/assets/styles/scss/utilities/_text.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/mixins/bi-app/_bi-app-rtl.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-rtl.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss"
|
||||
]
|
||||
}
|
||||
],
|
||||
"projectView": {
|
||||
"selectedView": "log"
|
||||
},
|
||||
"fileWatcher": {
|
||||
"enabled": true,
|
||||
"watchedExtensions": [
|
||||
"less",
|
||||
"sass",
|
||||
"scss",
|
||||
"styl",
|
||||
"md",
|
||||
"markdown",
|
||||
"coffee",
|
||||
"js",
|
||||
"jade",
|
||||
"haml",
|
||||
"slim",
|
||||
"ls",
|
||||
"kit",
|
||||
"png",
|
||||
"jpg",
|
||||
"jpeg",
|
||||
"ts",
|
||||
"pug",
|
||||
"css",
|
||||
"html",
|
||||
"htm",
|
||||
"php"
|
||||
]
|
||||
},
|
||||
"pathFilters": [
|
||||
"node_modules",
|
||||
".*",
|
||||
"bower_components",
|
||||
"prepros.config",
|
||||
"Prepros Export",
|
||||
"prepros-6.config",
|
||||
"prepros.cfg",
|
||||
"wp-admin",
|
||||
"wp-includes"
|
||||
],
|
||||
"server": {
|
||||
"port": 7879,
|
||||
"assignNewPortAutomatically": true,
|
||||
"enable": true,
|
||||
"proxy": {
|
||||
"enable": false,
|
||||
"url": ""
|
||||
}
|
||||
},
|
||||
"browser-sync": {
|
||||
"enable": false,
|
||||
"clicks": true,
|
||||
"forms": true,
|
||||
"scroll": true
|
||||
},
|
||||
"live-reload": {
|
||||
"enable": true,
|
||||
"animate": true,
|
||||
"delay": 0
|
||||
},
|
||||
"ftp-deploy": {
|
||||
"connectionType": "ftp",
|
||||
"remotePath": "",
|
||||
"uploadTimeout": 20000,
|
||||
"uploadOnChange": false,
|
||||
"ftp": {
|
||||
"secure": false,
|
||||
"host": "",
|
||||
"port": 21,
|
||||
"user": "",
|
||||
"password": ""
|
||||
},
|
||||
"sftp": {
|
||||
"host": "",
|
||||
"port": 22,
|
||||
"usePrivateKey": false,
|
||||
"username": "",
|
||||
"password": "",
|
||||
"privateKey": "",
|
||||
"passphrase": ""
|
||||
},
|
||||
"pathFilters": [
|
||||
"config.rb",
|
||||
"prepros.config",
|
||||
"prepros-6.config",
|
||||
"node_modules",
|
||||
"Prepros Export",
|
||||
".git",
|
||||
".idea",
|
||||
".sass-cache",
|
||||
".hg",
|
||||
".svn",
|
||||
".cache",
|
||||
".DS_Store",
|
||||
"*.sass",
|
||||
"*.scss",
|
||||
"*.less",
|
||||
"*.pug",
|
||||
"*.jade",
|
||||
"*.styl",
|
||||
"*.haml",
|
||||
"*.slim",
|
||||
"*.coffee",
|
||||
"*.ls",
|
||||
"*.kit",
|
||||
"*.ts"
|
||||
],
|
||||
"history": []
|
||||
},
|
||||
"file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"autoprefixer": {
|
||||
"browsers": "last 5 versions"
|
||||
},
|
||||
"file-type-pug": "{\"compilers\":[\"pug\"]}",
|
||||
"file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
|
||||
"file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
|
||||
"file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"file-type-markdown": "{\"compilers\":[\"markdown\"]}",
|
||||
"file-type-haml": "{\"compilers\":[\"haml\"]}",
|
||||
"file-type-slim": "{\"compilers\":[\"slim\"]}",
|
||||
"file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
|
||||
"file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
|
||||
"file-type-kit": "{\"compilers\":[\"kit\"]}",
|
||||
"uglify-js": {
|
||||
"ie8": false,
|
||||
"compress": {
|
||||
"sequences": true,
|
||||
"properties": true,
|
||||
"dead_code": true,
|
||||
"drop_debugger": true,
|
||||
"unsafe": false,
|
||||
"unsafe_comps": false,
|
||||
"unsafe_math": false,
|
||||
"unsafe_proto": false,
|
||||
"unsafe_regexp": false,
|
||||
"conditionals": true,
|
||||
"comparisons": true,
|
||||
"evaluate": true,
|
||||
"booleans": true,
|
||||
"loops": true,
|
||||
"unused": true,
|
||||
"toplevel": false,
|
||||
"top_retain": "",
|
||||
"hoist_funs": true,
|
||||
"hoist_vars": false,
|
||||
"if_return": true,
|
||||
"join_vars": true,
|
||||
"cascade": true,
|
||||
"collapse_vars": true,
|
||||
"reduce_vars": true,
|
||||
"warnings": true,
|
||||
"negate_iife": true,
|
||||
"pure_getters": false,
|
||||
"pure_funcs": [],
|
||||
"drop_console": false,
|
||||
"expression": false,
|
||||
"keep_fargs": true,
|
||||
"keep_fnames": false,
|
||||
"passes": 1,
|
||||
"keep_infinity": false,
|
||||
"side_effects": true,
|
||||
"global_defs": []
|
||||
},
|
||||
"output": {
|
||||
"ascii_only": false,
|
||||
"beautify": true,
|
||||
"bracketize": false,
|
||||
"comments": "",
|
||||
"indent_level": 4,
|
||||
"indent_start": 0,
|
||||
"inline_script": false,
|
||||
"keep_quoted_props": false,
|
||||
"max_line_len": false,
|
||||
"preamble": "",
|
||||
"preserve_line": false,
|
||||
"quote_keys": false,
|
||||
"quote_style": 0,
|
||||
"semicolons": true,
|
||||
"shebang": true,
|
||||
"width": 80
|
||||
}
|
||||
},
|
||||
"cssnext": {
|
||||
"customProperties": true,
|
||||
"applyRule": true,
|
||||
"calc": false,
|
||||
"nesting": true,
|
||||
"customMedia": true,
|
||||
"mediaQueriesRange": true,
|
||||
"customSelectors": true,
|
||||
"attributeCaseInsensitive": true,
|
||||
"colorRebeccapurple": true,
|
||||
"colorHwb": true,
|
||||
"colorGray": true,
|
||||
"colorHexAlpha": true,
|
||||
"colorFunction": true,
|
||||
"fontVariant": true,
|
||||
"filter": true,
|
||||
"initial": true,
|
||||
"rem": true,
|
||||
"pseudoElements": true,
|
||||
"pseudoClassMatches": true,
|
||||
"pseudoClassNot": true,
|
||||
"pseudoClassAnyLink": true,
|
||||
"colorRgba": true,
|
||||
"overflowWrap": true
|
||||
},
|
||||
"file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
|
||||
"babel": {
|
||||
"useBabelRc": true,
|
||||
"presets": {
|
||||
"babel-preset-es2015": true
|
||||
},
|
||||
"plugins": {
|
||||
"babel-plugin-syntax-jsx": true,
|
||||
"babel-plugin-transform-react-jsx": true,
|
||||
"babel-plugin-transform-async-to-generator": true,
|
||||
"babel-plugin-transform-class-properties": true,
|
||||
"babel-plugin-transform-object-rest-spread": true
|
||||
}
|
||||
},
|
||||
"file-type-png": "{\"compilers\":[\"png\"]}",
|
||||
"file-type-jpg": "{\"compilers\":[\"jpg\"]}"
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
// 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 } }));
|
||||
}
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
<script src="../test.js"></script>
|
||||
<h1>
|
||||
|
||||
{{title}}
|
||||
</h1>
|
||||
@ -1,5 +0,0 @@
|
||||
describe('App: Optima', () => {
|
||||
it('should expect true to be true', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -1,28 +0,0 @@
|
||||
import { Component,OnInit } from '@angular/core';
|
||||
import {TranslateService} from 'ng2-translate/ng2-translate';
|
||||
import { SharedService } from './shared.service';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: '<router-outlet></router-outlet>'
|
||||
})
|
||||
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
|
||||
constructor(translate: TranslateService,public shared:SharedService) {
|
||||
translate.addLangs(['en', 'fr']);
|
||||
translate.setDefaultLang('en');
|
||||
//new aws_demo();
|
||||
//aws();
|
||||
this.shared;
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
|
||||
}
|
||||
ngOnInit(){
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,103 +0,0 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpModule, Http } from '@angular/http';
|
||||
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { DemoMaterialModule } from './shared/demo.module';
|
||||
|
||||
import {MatSidenavModule} from '@angular/material/sidenav';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatListModule} from '@angular/material/list';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatTableModule} from '@angular/material';
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import {MatProgressBarModule} from '@angular/material/progress-bar';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { JazzDialogComponent } from './material/dialog/dialog.component';
|
||||
|
||||
import { NewPasswordDialog } from './session/login/login.component';
|
||||
import { ForgotPass } from './session/login/login.component';
|
||||
import { ChangePasswordDialog } from './user-pages/user-profile/user-profile.component';
|
||||
import { AppRoutes } from './app.routing';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
import { SharedModule } from './shared/shared.module';
|
||||
|
||||
import { AwsService } from './aws.service';
|
||||
import { SharedService } from './shared.service';
|
||||
|
||||
export function createTranslateLoader(http: Http) {
|
||||
return new TranslateStaticLoader(http, './assets/i18n', '.json');
|
||||
}
|
||||
|
||||
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
suppressScrollX: true
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AdminLayoutComponent,
|
||||
AuthLayoutComponent,
|
||||
JazzDialogComponent,
|
||||
|
||||
NewPasswordDialog,ForgotPass,ChangePasswordDialog,
|
||||
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
SharedModule,
|
||||
RouterModule.forRoot(AppRoutes,{
|
||||
onSameUrlNavigation: 'reload'
|
||||
}),
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
MatSidenavModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatMenuModule,
|
||||
MatToolbarModule,
|
||||
MatTabsModule,
|
||||
MatCheckboxModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatCardModule,
|
||||
DemoMaterialModule,
|
||||
TranslateModule.forRoot({
|
||||
provide: TranslateLoader,
|
||||
useFactory: (createTranslateLoader),
|
||||
deps: [Http]
|
||||
}),
|
||||
FlexLayoutModule,
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: [{PERFECT_SCROLLBAR_CONFIG,AwsService,SharedService}],
|
||||
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG,
|
||||
useClass:[{AwsService,SharedService}]
|
||||
}
|
||||
],
|
||||
entryComponents: [JazzDialogComponent, NewPasswordDialog,ForgotPass,ChangePasswordDialog],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
@ -1,37 +0,0 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
|
||||
export const AppRoutes: Routes = [{
|
||||
path: '',
|
||||
redirectTo: 'authentication',
|
||||
pathMatch: 'full',
|
||||
}, {
|
||||
path: '',
|
||||
component: AdminLayoutComponent,
|
||||
children: [{
|
||||
path: 'home',
|
||||
loadChildren: './dashboard/dashboard.module#DashboardModule'
|
||||
},{
|
||||
path: 'user-pages',
|
||||
loadChildren: './user-pages/users.module#UsersModule'
|
||||
},{
|
||||
path:'settings',
|
||||
loadChildren:'./settings/settings.module#SettingsModule'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: '',
|
||||
component: AuthLayoutComponent,
|
||||
children: [{
|
||||
path: 'authentication',
|
||||
loadChildren: './session/session.module#SessionModule'
|
||||
},{
|
||||
path: 'error',
|
||||
loadChildren: './error/error.module#ErrorModule'
|
||||
}]
|
||||
}, {
|
||||
path: '**',
|
||||
redirectTo: 'session/404'
|
||||
}];
|
||||
@ -1,15 +0,0 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { AwsService } from './aws.service';
|
||||
|
||||
describe('AwsService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [AwsService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([AwsService], (service: AwsService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
@ -1,778 +0,0 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import {
|
||||
AuthenticationDetails,
|
||||
CognitoUserPool,
|
||||
CognitoUser,
|
||||
CognitoUserAttribute,
|
||||
ICognitoUserAttributeData,
|
||||
ISignUpResult,
|
||||
CognitoUserSession
|
||||
} from "amazon-cognito-identity-js";
|
||||
import { Observable } from "rxjs/Observable";
|
||||
import "rxjs/add/operator/map";
|
||||
import * as AWS from "aws-sdk";
|
||||
import { LoginComponent } from "./session/login/login.component";
|
||||
|
||||
import { Http, Headers, RequestOptions } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
import { SharedService } from './shared.service';
|
||||
|
||||
|
||||
let apiurl = 'localhost/sparqapi/api/';
|
||||
const sineedge_poolData = {
|
||||
UserPoolId: "ap-south-1_y7dt3iEaX", //ap-south-1_qQ85yQZJO UserName :SPARQ_SINEEDGE_DEV
|
||||
ClientId: "291qt4smn5pql6o8cc2hi201lj" // ClientName: SINEEDGE_DEV_WEB
|
||||
};
|
||||
const sineedgedev_poolData = {
|
||||
UserPoolId: "ap-south-1_qQ85yQZJO", // UserName :SPARQ_SINEEDGE_DEV
|
||||
ClientId: "2o5c3cs9k3als16nqhp3irh8rs" // ClientName: SINEEDGE_DEV_WEB
|
||||
}
|
||||
const lender_poolData = {
|
||||
UserPoolId: "ap-south-1_hFiGyr1Gw", // Username :SPARQ_LENDER_DEV
|
||||
ClientId: "6egsdssf0i7h2o9mscqgqbn788" // ClientName:LENDER_DEV_WEB
|
||||
};
|
||||
const vendor_poolData = {
|
||||
UserPoolId: "",
|
||||
ClientId: ""
|
||||
}
|
||||
const sineedgeUserPool = new CognitoUserPool(sineedge_poolData);
|
||||
const lenderUserPool = new CognitoUserPool(lender_poolData);
|
||||
const sineedgedevUserpool = new CognitoUserPool(sineedgedev_poolData);
|
||||
|
||||
/**
|
||||
* Identity PoolID
|
||||
*/
|
||||
const sineedgeIdentity = "ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961";//"ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961";
|
||||
const lenderIdentity = "ap-south-1:ca22dabc-db59-4af5-9bb8-265f7ec95907";
|
||||
const vendorIdenttiy = "";
|
||||
// serviceProvider
|
||||
// apiurl = "http://localhost/sineedge/sparqapi/api/";
|
||||
const currentdate = new Date().toJSON().slice(0,19).replace('T',' ');
|
||||
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
|
||||
|
||||
export class AwsService {
|
||||
|
||||
mySecData: any;
|
||||
|
||||
cognitoUser: any;
|
||||
jwttoken: any;
|
||||
cognitousers: any;
|
||||
localUserId:any = '';
|
||||
constructor(public http: Http, public RequestOptions: RequestOptions, public shared: SharedService) { }
|
||||
|
||||
/**
|
||||
* Login Function
|
||||
* @param authenticationData inside of(email and password for login user)
|
||||
* By sriram
|
||||
*/
|
||||
dologin(authenticationData) {
|
||||
//(authenticationData);
|
||||
const authenticationDetails = new AuthenticationDetails(authenticationData);
|
||||
let Newpassword = authenticationData.newpassword;
|
||||
let attributesData = [];
|
||||
const userData = {
|
||||
Username: authenticationData.Username, // User email id
|
||||
Pool: sineedgedevUserpool // user Pool ID
|
||||
};
|
||||
let cognitoUser = new CognitoUser(userData);
|
||||
return Observable.create(observer => {
|
||||
cognitoUser.authenticateUser(authenticationDetails, {
|
||||
newPasswordRequired: (userAttributes, requiredAttributes) => { // new password set
|
||||
cognitoUser.completeNewPasswordChallenge(
|
||||
Newpassword,
|
||||
attributesData,
|
||||
{
|
||||
onSuccess: function (result) {
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function (err) {
|
||||
//(err);
|
||||
observer.error(err);
|
||||
//LoginComponent.prototype.open();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
onSuccess: function (result) { // success user login
|
||||
// let accessToken = result.getAccessToken().getJwtToken();
|
||||
////(result);
|
||||
window.localStorage.setItem('Currentuser', '1');
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function (err) { // error user login
|
||||
|
||||
alert(err.message);
|
||||
observer.error(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* End of login function
|
||||
*/
|
||||
|
||||
/**
|
||||
* User Session validate
|
||||
*/
|
||||
getAuthenticatedUser(): any {
|
||||
// gets the current user from the local storage
|
||||
this.cognitoUser = sineedgedevUserpool.getCurrentUser();
|
||||
//let sessions = '';
|
||||
|
||||
let jwttoken = "";
|
||||
let session = "";
|
||||
if (this.cognitoUser != null) {
|
||||
this.cognitoUser.getSession(function (err, session) {
|
||||
if (err) {
|
||||
alert(err.message || JSON.stringify(err));
|
||||
return;
|
||||
}
|
||||
console.log("session validity: " + session.isValid());
|
||||
jwttoken = session;
|
||||
////(jwttoken);
|
||||
AWS.config.region = "ap-south-1";
|
||||
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: sineedgeIdentity, // for sineedge_DEV
|
||||
Logins: {
|
||||
"cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO": session
|
||||
.getIdToken()
|
||||
.getJwtToken()
|
||||
}
|
||||
// NOTE: getSession must be called to authenticate user before calling getUserAttributes
|
||||
});
|
||||
});
|
||||
////()
|
||||
|
||||
|
||||
|
||||
return jwttoken;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* End of function
|
||||
*/
|
||||
getconfig() {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
let config = "";
|
||||
config += AWS.config.region = "ap-south-1";
|
||||
config += AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: sineedgeIdentity, // for sineedge_DEV
|
||||
Logins: {
|
||||
"cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO": session
|
||||
.getIdToken()
|
||||
.getJwtToken()
|
||||
}
|
||||
// NOTE: getSession must be called to authenticate user before calling getUserAttributes
|
||||
});
|
||||
return config;
|
||||
}
|
||||
|
||||
getlocale(){
|
||||
let session:any = this.getAuthenticatedUser() || "";
|
||||
return session.idToken.payload.locale;
|
||||
}
|
||||
/**----------------------*/
|
||||
/**----------------------*/
|
||||
/**
|
||||
* User Details
|
||||
*/
|
||||
getUser() {
|
||||
// gets the current user from the local storage
|
||||
|
||||
let currentUser = sineedgedevUserpool.getCurrentUser();
|
||||
//console.log(currentUser);
|
||||
return currentUser;
|
||||
}
|
||||
getuserdata() {
|
||||
let headers = this.shared.headercofig('');
|
||||
console.log(headers);
|
||||
let users = this.http.get(apiurl + 'getListOfUsers', { headers: headers }).map(res => res.json());
|
||||
console.log(users);
|
||||
return users;
|
||||
}
|
||||
/**
|
||||
* User Logout
|
||||
*/
|
||||
logOut() {
|
||||
window.localStorage.removeItem("Currentuser");
|
||||
this.getUser().signOut();
|
||||
this.cognitoUser = null;
|
||||
}
|
||||
/**
|
||||
* User Change Password
|
||||
*/
|
||||
changepassword(passData) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
console.log(session);
|
||||
this.getconfig();
|
||||
var params = {
|
||||
AccessToken: session.accessToken.jwtToken, /* required */
|
||||
PreviousPassword: passData.oldPassword, /* required */
|
||||
ProposedPassword: passData.newPassword /* required */
|
||||
};
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.changePassword(params, function (err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
console.log(data);
|
||||
observe.next(data);
|
||||
// successful response
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* user function end
|
||||
*/
|
||||
|
||||
/**
|
||||
* admin User Create
|
||||
* @param userData refer to register components
|
||||
*/
|
||||
register(userData) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let registeredData: any = "";
|
||||
let params: any;
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
// (userGroup);
|
||||
if (userGroup == "ADMIN") {
|
||||
if (userData.type.entity_type_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId /* required */,
|
||||
Username: userData.email /* required */,
|
||||
DesiredDeliveryMediums: [
|
||||
"EMAIL"
|
||||
/* more items */
|
||||
],
|
||||
// ForceAliasCreation: true || false,
|
||||
MessageAction: "SUPPRESS",
|
||||
TemporaryPassword: "temp1234",
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: userData.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91" + userData.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
} else if (userData.type.entity_type_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
Username: userData.email /* required */,
|
||||
DesiredDeliveryMediums: [
|
||||
"EMAIL"
|
||||
/* more items */
|
||||
],
|
||||
// ForceAliasCreation: true || false,
|
||||
MessageAction: "SUPPRESS",
|
||||
TemporaryPassword: "temp1234",
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: userData.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91" + userData.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
}
|
||||
// .log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminCreateUser(params, (
|
||||
err,
|
||||
data
|
||||
) => {
|
||||
if (err) { alert(err.stack); }
|
||||
// an error occurred
|
||||
|
||||
|
||||
this.mySecData = data;
|
||||
AwsService.prototype.UserGroup(data, userData);
|
||||
observe.next(data);
|
||||
|
||||
// successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
UserGroup(cognitodata, userData) {
|
||||
//(userData);
|
||||
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
|
||||
//let cognitodata = "539bfefa-ae42-4bee-bf79-4b15d1a2af7f";
|
||||
if(userData.userid ==''){
|
||||
for(let role of userData.role){
|
||||
|
||||
let params: any;
|
||||
if (userData.type.entity_type_id == 1) {
|
||||
|
||||
params = {
|
||||
GroupName: role.value /* required */,
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
} else if (userData.type.entity_type_id == 2) {
|
||||
params = {
|
||||
GroupName: role.value /* required */,
|
||||
UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
//(params);
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminAddUserToGroup(params, function (
|
||||
err,
|
||||
data
|
||||
) {
|
||||
if (err) {
|
||||
alert(err.stack);
|
||||
}//(err, err.stack);
|
||||
// an error occurred
|
||||
else {//(data);
|
||||
|
||||
return data;
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
}else{
|
||||
let params :any;
|
||||
console.log(userData);
|
||||
console.log(cognitodata);
|
||||
if (userData.fk_entity_id == 1) {
|
||||
|
||||
params = {
|
||||
GroupName: cognitodata.value /* required */,
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: userData.aws_name //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
} else if (userData.fk_entity_id == 2) {
|
||||
params = {
|
||||
GroupName: cognitodata.value /* required */,
|
||||
UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: userData.aws_name //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
//(params);
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminAddUserToGroup(params, function (
|
||||
err,
|
||||
data
|
||||
) {
|
||||
if (err) {
|
||||
alert(err.stack);
|
||||
}//(err, err.stack);
|
||||
// an error occurred
|
||||
else {//(data);
|
||||
|
||||
console.log(data);
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* AWS User Create Local DB
|
||||
* @param cognitousers,users
|
||||
**/
|
||||
saveRecords(cognitousers, users) {
|
||||
|
||||
let data: any = '';
|
||||
|
||||
if (cognitousers != '' && cognitousers !== undefined) {
|
||||
//console.log(users);
|
||||
let aws_name :any;
|
||||
let updateby:any;
|
||||
let createdby:any;
|
||||
let createdon:any;
|
||||
let updateon:any;
|
||||
if(users.userid != null){
|
||||
aws_name = users.aws_name;
|
||||
updateby = this.getlocale();
|
||||
updateon = currentdate;
|
||||
}else{
|
||||
aws_name = cognitousers.User.Username;
|
||||
createdby = this.getlocale();
|
||||
createdon = currentdate;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
console.log(users);
|
||||
|
||||
let records:any = {
|
||||
"userid":users.userid,
|
||||
"aws_name": aws_name,
|
||||
"first_name": users.firstName,
|
||||
"last_name": users.lastName,
|
||||
"mobile_no": users.phone,
|
||||
"email": users.email,
|
||||
"alt_email":users.alt_email,
|
||||
"alt_mobile_no":users.alt_mobile_no,
|
||||
"addressline1":users.address1,
|
||||
"addressline2":users.address2,
|
||||
"addressline3":users.address3,
|
||||
"isactive":users.isactive,
|
||||
"fk_entity_id":users.type.entity_type_id,
|
||||
"fk_designation":users.designation.designation_id,
|
||||
"fk_city":users.city.city_id,
|
||||
"fk_state":users.state.state_id,
|
||||
"pincode":users.pincode,
|
||||
"profilepic":users.userpic.name,
|
||||
"fk_createdby":createdby,
|
||||
"fk_updatedby":updateby,
|
||||
"createdon":createdon,
|
||||
"updatedon":updateon,
|
||||
};
|
||||
let roles:any=[];
|
||||
for(var role of users.role){
|
||||
|
||||
roles.push({ "user_role": role.value });
|
||||
}
|
||||
console.log(roles);
|
||||
formData.append('records',JSON.stringify(records));
|
||||
formData.append('roles',JSON.stringify(roles));
|
||||
formData.append('profilepic',users.userpic);
|
||||
//new Response(formData).text().then(console.log);
|
||||
//let headers = this.shared.headercofig('');
|
||||
let session:any = this.getAuthenticatedUser() ||"";
|
||||
|
||||
let headers = new Headers(
|
||||
{
|
||||
'Authorization':'sparqvenba2018','Token':session.getIdToken().getJwtToken()
|
||||
});
|
||||
|
||||
//(request);
|
||||
if(users.userid !='' && users.userid !=null && users.userid !==undefined){
|
||||
return this.http.post(apiurl+'updateExistUser',formData,{headers:headers}).map(res=>res.json());
|
||||
}else{
|
||||
return this.http.post(apiurl + "saveNewUser", formData, { headers: headers }).map(res => res.json());
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* admin User update
|
||||
* @param username,clientid params
|
||||
**/
|
||||
adminUpdateuser(user, cognitosdata) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
|
||||
//let cognitodata = "539bfefa-ae42-4bee-bf79-4b15d1a2af7f";
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
//cognitosdata = 7;
|
||||
|
||||
if (userGroup == 'ADMIN') {
|
||||
var params = {
|
||||
UserAttributes: [ /* required */
|
||||
{
|
||||
Name: 'locale', /* required */
|
||||
Value: cognitosdata.toString()
|
||||
},
|
||||
/* more items */
|
||||
],
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: user.email /* required */
|
||||
};
|
||||
//console.log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminUpdateUserAttributes(params, function (err, data) {
|
||||
if (err) //(err, err.stack);
|
||||
console.log(data); // an error occurred
|
||||
observe.next(data); // successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* Admin enable user
|
||||
* @param userdata
|
||||
* @param awsName
|
||||
*/
|
||||
adminenableUser(userdata, awsName) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
//cognitosdata = 7;
|
||||
let params: any;
|
||||
if (userGroup == 'ADMIN') {
|
||||
console.log(userdata);
|
||||
if (userdata.fk_entity_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
} else if (userdata.fk_entity_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
}
|
||||
console.log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminEnableUser(params, function (err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
observe.next("1"); // successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* admin Disable user
|
||||
* @param userdata
|
||||
* @param awsName
|
||||
*/
|
||||
admindisabelUser(userdata, awsName) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
//cognitosdata = 7;
|
||||
let params: any;
|
||||
if (userGroup == 'ADMIN') {
|
||||
console.log(userdata);
|
||||
if (userdata.fk_entity_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
} else if (userdata.fk_entity_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
}
|
||||
console.log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminDisableUser(params, function (err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
observe.next("0"); // successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Admin Local Update
|
||||
* @param records
|
||||
*/
|
||||
adminupendis(records){
|
||||
let headers = this.shared.headercofig('');
|
||||
console.log(headers);
|
||||
let users = this.http.post(apiurl + 'updateExistUser',JSON.stringify(records), { headers: headers }).map(res => res.json());
|
||||
console.log(users);
|
||||
return users;
|
||||
}
|
||||
/**
|
||||
* Admin Create User End
|
||||
**/
|
||||
/************************************************************************************ */
|
||||
/**
|
||||
* Admin Upadte users
|
||||
*/
|
||||
|
||||
adminGetUsers(userId){
|
||||
this.localUserId = userId;
|
||||
|
||||
|
||||
|
||||
return Observable.create(observe=>{
|
||||
observe.next(this.localUserId);
|
||||
})
|
||||
}
|
||||
|
||||
adminchangeData(userData,changeusers){
|
||||
console.log(userData);
|
||||
console.log(changeusers);
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let registeredData: any = "";
|
||||
let params:any='';
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
// (userGroup);
|
||||
if (userGroup == "ADMIN") {
|
||||
if (userData.fk_entity_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId /* required */,
|
||||
Username: userData.email,//userData.email /* required */,
|
||||
|
||||
// ForceAliasCreation: true || false,
|
||||
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: changeusers.email,//userData.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91"+ changeusers.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
} else if (userData.fk_entity_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
Username: changeusers.email /* required */,
|
||||
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: changeusers.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91" + changeusers.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
}
|
||||
return Observable.create(observe=>{
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminUpdateUserAttributes(params, function(err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
observe.next(data); // successful response
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
adminremoveGroup(roles,users){
|
||||
console.log(roles);
|
||||
console.log(users);
|
||||
if(users !==undefined){
|
||||
|
||||
let session = this.getAuthenticatedUser() ||"";
|
||||
this.getconfig();
|
||||
var params = {
|
||||
GroupName: roles.value, /* required */
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: users.aws_name//'2c64866e-e96f-453b-903f-2b6f831688af' /* required */
|
||||
};
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminRemoveUserFromGroup(params, function(err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
else console.log(data); // successful response
|
||||
});
|
||||
}
|
||||
}
|
||||
/************************************************************************************ */
|
||||
/**
|
||||
* user forgot password
|
||||
* @parms ClientId , Username(Email)
|
||||
*/
|
||||
|
||||
userforgotpass(auth) {
|
||||
////(auth);
|
||||
const userData = {
|
||||
Username: auth.Username,
|
||||
Pool: sineedgedevUserpool
|
||||
};
|
||||
let cognitoUser = new CognitoUser(userData);
|
||||
return Observable.create(observe => {
|
||||
cognitoUser.forgotPassword({
|
||||
onSuccess: function (data) {
|
||||
// successfully initiated reset password request
|
||||
//('CodeDeliveryData from forgotPassword: ' + data);
|
||||
observe.next(data);
|
||||
},
|
||||
onFailure: function (err) {
|
||||
alert(err.message || JSON.stringify(err));
|
||||
},
|
||||
//Optional automatic callback
|
||||
inputVerificationCode: function (data) {
|
||||
//('Code sent to: ' + data);
|
||||
var verificationCode = prompt('Please input verification code ', '');
|
||||
var newPassword = prompt('Enter new password ', '');
|
||||
cognitoUser.confirmPassword(verificationCode, newPassword, {
|
||||
onSuccess() {
|
||||
//('Password confirmed!');
|
||||
},
|
||||
onFailure(err) {
|
||||
//('Password not confirmed!');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Local Data
|
||||
*/
|
||||
|
||||
entityType(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'ENTITYTYPE'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
City(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'CITY'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
State(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'STATE'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
designation(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'DESIGNATION'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,304 +0,0 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import {
|
||||
AuthenticationDetails,
|
||||
CognitoUserPool,
|
||||
CognitoUser,
|
||||
CognitoUserAttribute,
|
||||
ICognitoUserAttributeData,
|
||||
ISignUpResult,
|
||||
CognitoUserSession
|
||||
} from "amazon-cognito-identity-js";
|
||||
import { Observable } from "rxjs/Observable";
|
||||
import "rxjs/add/operator/map";
|
||||
import * as AWS from "aws-sdk";
|
||||
import { LoginComponent } from "./session/login/login.component";
|
||||
let apiUrl = "http://localhost:8080/ApolloSC/api/";
|
||||
|
||||
const lender_poolData = {
|
||||
UserPoolId: "ap-south-1_bVF08ztrS", // Your user pool id here
|
||||
ClientId: "2aqnppt0nb3kqbskpuiv8hi2t9" // Your client id here
|
||||
};
|
||||
|
||||
|
||||
const lenderUserPool = new CognitoUserPool(lender_poolData);
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
export class AwsLenderService {
|
||||
cognitoUser: any;
|
||||
jwttoken: any;
|
||||
cognitousers: any;
|
||||
constructor() {}
|
||||
|
||||
/**
|
||||
* Login Function
|
||||
* @param authenticationData inside of(email and password for login user)
|
||||
* By sriram
|
||||
*/
|
||||
dologin(authenticationData) {
|
||||
console.log(authenticationData);
|
||||
|
||||
const authenticationDetails = new AuthenticationDetails(authenticationData);
|
||||
let Newpassword = "12345678";//authenticationData.newpassword;
|
||||
let attributesData = [];
|
||||
|
||||
const userData = {
|
||||
Username: authenticationData.Username,
|
||||
Pool: lenderUserPool
|
||||
};
|
||||
const cognitoUser = new CognitoUser(userData);
|
||||
|
||||
return Observable.create(observer => {
|
||||
cognitoUser.authenticateUser(authenticationDetails, {
|
||||
newPasswordRequired: (userAttributes, requiredAttributes) => {
|
||||
cognitoUser.completeNewPasswordChallenge(
|
||||
Newpassword,
|
||||
attributesData,
|
||||
{
|
||||
onSuccess: function(result) {
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function(err) {
|
||||
console.log(err);
|
||||
observer.error(err);
|
||||
//LoginComponent.prototype.open();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
onSuccess: function(result) {
|
||||
// let accessToken = result.getAccessToken().getJwtToken();
|
||||
//console.log(result);
|
||||
window.localStorage.setItem('Currentuser','2');
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function(err) {
|
||||
|
||||
alert(err.message);
|
||||
observer.error(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* End of login function
|
||||
*/
|
||||
getUser() {
|
||||
// gets the current user from the local storage
|
||||
return lenderUserPool.getCurrentUser();
|
||||
}
|
||||
|
||||
logOut() {
|
||||
window.localStorage.removeItem("Currentuser");
|
||||
this.getUser().signOut();
|
||||
this.cognitoUser = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* User Created for Admin
|
||||
* @param userDetails
|
||||
*/
|
||||
getAuthenticatedUser(): any {
|
||||
// gets the current user from the local storage
|
||||
this.cognitoUser = lenderUserPool.getCurrentUser();
|
||||
//let sessions = '';
|
||||
|
||||
let jwttoken = "";
|
||||
let session = "";
|
||||
if (this.cognitoUser != null) {
|
||||
this.cognitoUser.getSession(function(err, session) {
|
||||
if (err) {
|
||||
alert(err.message || JSON.stringify(err));
|
||||
return;
|
||||
}
|
||||
console.log("session validity: " + session.isValid());
|
||||
// this.session = ;
|
||||
// console.log(this.session);
|
||||
//this.checkuserstatus(session);
|
||||
jwttoken = session;
|
||||
//console.log(jwttoken);
|
||||
AWS.config.region = "ap-south-1";
|
||||
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: "ap-south-1:2ab4b493-f99f-4a06-9621-349197e36a5d",
|
||||
Logins: {
|
||||
"cognito-idp.ap-south-1.amazonaws.com/ap-south-1_y7dt3iEaX": session
|
||||
.getIdToken()
|
||||
.getJwtToken()
|
||||
}
|
||||
// NOTE: getSession must be called to authenticate user before calling getUserAttributes
|
||||
});
|
||||
});
|
||||
//console.log()
|
||||
|
||||
//console.log("1");
|
||||
|
||||
return jwttoken;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* New admin User Create
|
||||
* @param userData refer to register components
|
||||
*/
|
||||
// register(userData) {
|
||||
// let session = this.getAuthenticatedUser() || "";
|
||||
// let localdata: any;
|
||||
|
||||
// // let idToken = session.idToken;
|
||||
// // console.log(idToken);return false;
|
||||
// console.log(session);
|
||||
|
||||
// AWS.config.region = "ap-south-1";
|
||||
// AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
// IdentityPoolId: "ap-south-1:2ab4b493-f99f-4a06-9621-349197e36a5d",
|
||||
// Logins: {
|
||||
// "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_y7dt3iEaX": session
|
||||
// .getIdToken()
|
||||
// .getJwtToken()
|
||||
// }
|
||||
// });
|
||||
// let params:any;
|
||||
// let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
// usergroup => usergroup == "ADMIN"
|
||||
// )[0];
|
||||
// // console.log(userGroup);
|
||||
// if (userGroup == "ADMIN") {
|
||||
// if(userData.type.value ==1){
|
||||
// params = {
|
||||
// UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
// Username: userData.email /* required */,
|
||||
// DesiredDeliveryMediums: [
|
||||
// "EMAIL"
|
||||
// /* more items */
|
||||
// ],
|
||||
// // ForceAliasCreation: true || false,
|
||||
// MessageAction: "SUPPRESS",
|
||||
// TemporaryPassword: "temp1234",
|
||||
// UserAttributes: [
|
||||
// {
|
||||
// Name: "email" /* required */,
|
||||
// Value: userData.email
|
||||
// },
|
||||
// {
|
||||
// Name: "phone_number" /* required */,
|
||||
// Value: "+91" + userData.phone
|
||||
// }
|
||||
// /* more items */
|
||||
// ]
|
||||
// };
|
||||
// }else if(userData.type.value ==2){
|
||||
// params = {
|
||||
// UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
// Username: userData.email /* required */,
|
||||
// DesiredDeliveryMediums: [
|
||||
// "EMAIL"
|
||||
// /* more items */
|
||||
// ],
|
||||
// // ForceAliasCreation: true || false,
|
||||
// MessageAction: "SUPPRESS",
|
||||
// TemporaryPassword: "temp1234",
|
||||
// UserAttributes: [
|
||||
// {
|
||||
// Name: "email" /* required */,
|
||||
// Value: userData.email
|
||||
// },
|
||||
// {
|
||||
// Name: "phone_number" /* required */,
|
||||
// Value: "+91" + userData.phone
|
||||
// }
|
||||
// /* more items */
|
||||
// ]
|
||||
// };
|
||||
// }
|
||||
// console.log(params);
|
||||
// let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
// cognitoidentityserviceprovider.adminCreateUser(params, function(
|
||||
// err,
|
||||
// data
|
||||
// ) {
|
||||
// if (err) alert(err.stack);
|
||||
// // an error occurred
|
||||
// else {
|
||||
// console.log(data);
|
||||
// //localdata = data;
|
||||
// AwsLenderService.prototype.UserGroup(data, userData);
|
||||
// }
|
||||
// // successful response
|
||||
// });
|
||||
// //console.log(localdata);
|
||||
// }
|
||||
// }
|
||||
// UserGroup(cognitodata, userData) {
|
||||
// console.log(userData);
|
||||
|
||||
// let session = this.getAuthenticatedUser() || "";
|
||||
|
||||
// AWS.config.region = "ap-south-1";
|
||||
// AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
// IdentityPoolId: "ap-south-1:2ab4b493-f99f-4a06-9621-349197e36a5d",
|
||||
// Logins: {
|
||||
// "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_y7dt3iEaX": session
|
||||
// .getIdToken()
|
||||
// .getJwtToken()
|
||||
// }
|
||||
// });
|
||||
// //let cognitodata = "539bfefa-ae42-4bee-bf79-4b15d1a2af7f";
|
||||
// let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
// usergroup => usergroup == "ADMIN"
|
||||
// )[0];
|
||||
// console.log(userGroup);
|
||||
// // if (userGroup == "ADMIN"){
|
||||
// //console.log(localdata);
|
||||
// let params:any;
|
||||
// if(userData.type.value == 1){
|
||||
|
||||
// params = {
|
||||
// GroupName: userData.role.value /* required */,
|
||||
// UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
// Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
// };
|
||||
|
||||
// }else if(userData.type.value ==2){
|
||||
// params = {
|
||||
// GroupName: userData.role.value /* required */,
|
||||
// UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
// Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
// };
|
||||
|
||||
|
||||
// }
|
||||
// console.log(params);
|
||||
// let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
// cognitoidentityserviceprovider.adminAddUserToGroup(params, function(
|
||||
// err,
|
||||
// data
|
||||
// ) {
|
||||
// if (err) console.log(err, err.stack);
|
||||
// // an error occurred
|
||||
// else console.log(data); // successful response
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Admin Get Users
|
||||
// */
|
||||
// adminGetuser() {
|
||||
// let session = this.getAuthenticatedUser() || "";
|
||||
// let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
// usergroup => usergroup == "ADMIN"
|
||||
// )[0];
|
||||
// console.log(userGroup);
|
||||
// if (userGroup == "ADMIN") {
|
||||
// var params = {
|
||||
// UserPoolId: lender_poolData.UserPoolId /* required */
|
||||
// };
|
||||
// let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
// cognitoidentityserviceprovider.listUsers(params, function(err, data) {
|
||||
// if (err) console.log(err, err.stack);
|
||||
// // an error occurred
|
||||
// else console.log(data); // successful response
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@ -1,232 +0,0 @@
|
||||
export const single = [
|
||||
{
|
||||
name: 'Germany',
|
||||
value: 40632
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
value: 49737
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
value: 36745
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
value: 36240
|
||||
},
|
||||
{
|
||||
name: 'Spain',
|
||||
value: 33000
|
||||
},
|
||||
{
|
||||
name: 'Italy',
|
||||
value: 35800
|
||||
}
|
||||
];
|
||||
|
||||
export const multi = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 71632
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 40632
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 76953
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 31476
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 82632
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 49737
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 55986
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 37060
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 51732
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36745
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 34774
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 29476
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 95652
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36240
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 32543
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 26424
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const bubble = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2009',
|
||||
x: new Date(2009, 0, 1),
|
||||
y: 80.3,
|
||||
r: 80.4
|
||||
},
|
||||
{
|
||||
name: '2006',
|
||||
x: new Date(2006, 0, 1),
|
||||
y: 80.3,
|
||||
r: 78
|
||||
},
|
||||
{
|
||||
name: '1995',
|
||||
x: new Date(1995, 0, 1),
|
||||
y: 77.7,
|
||||
r: 58.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.4,
|
||||
r: 79
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
x: new Date(2010, 0, 1),
|
||||
y: 78.8,
|
||||
r: 310
|
||||
},
|
||||
{
|
||||
name: '2005',
|
||||
x: new Date(2005, 0, 1),
|
||||
y: 76.9,
|
||||
r: 283
|
||||
},
|
||||
{
|
||||
name: '1996',
|
||||
x: new Date(1996, 0, 1),
|
||||
y: 78.7,
|
||||
r: 59.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.4,
|
||||
r: 253
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2008',
|
||||
x: new Date(2008, 0, 1),
|
||||
y: 81.4,
|
||||
r: 63
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
x: new Date(2000, 0, 1),
|
||||
y: 79.1,
|
||||
r: 59.4
|
||||
},
|
||||
{
|
||||
name: '1994',
|
||||
x: new Date(1994, 0, 1),
|
||||
y: 76.7,
|
||||
r: 58.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 77.2,
|
||||
r: 56.9
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
series: [
|
||||
{
|
||||
name: '2007',
|
||||
x: new Date(2007, 0, 1),
|
||||
y: 80.2,
|
||||
r: 62.7
|
||||
},
|
||||
{
|
||||
name: '2003',
|
||||
x: new Date(2003, 0, 1),
|
||||
y: 77.8,
|
||||
r: 58.9
|
||||
},
|
||||
{
|
||||
name: '1995',
|
||||
x: new Date(1995, 0, 1),
|
||||
y: 78.7,
|
||||
r: 59.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.7,
|
||||
r: 57.1
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -1,437 +0,0 @@
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div class="card-wheather grad-blue">
|
||||
<div class="city">New Orders</div>
|
||||
<div class="date">This Week</div>
|
||||
<div class="weather">
|
||||
<div class="sun d-flex justify-content-between">
|
||||
<i class="fa fa-shopping-bag fa-3x align-self-center"></i>
|
||||
<div class="temp align-self-center">190</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div class="card-wheather grad-green">
|
||||
<div class="city">Total Profit</div>
|
||||
<div class="date">This Week</div>
|
||||
<div class="weather">
|
||||
<div class="sun d-flex justify-content-between">
|
||||
<i class="fa fa fa-users fa-3x align-self-center"></i>
|
||||
<div class="temp align-self-center">987</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div class="card-wheather grad-red">
|
||||
<div class="city">Email</div>
|
||||
<div class="date">This Week</div>
|
||||
<div class="weather">
|
||||
<div class="sun d-flex justify-content-between">
|
||||
<i class="fa fa-usd fa-3x align-self-center"></i>
|
||||
<div class="temp align-self-center">236</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Total Sales
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
<ngx-charts-area-chart [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" (select)="onSelect($event)">
|
||||
</ngx-charts-area-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Revenue
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card1" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card1="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>more</mat-icon>
|
||||
View More
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Remove Panel
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart"
|
||||
[data]="pieChartData"
|
||||
[options]="doughnutOptions"
|
||||
[colors]="doughnutChartColors"
|
||||
[labels]="pieChartLabels"
|
||||
[chartType]="pieChartType"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex.gt-xs="50" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Yearly Sales
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card2="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>more</mat-icon>
|
||||
View More
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Remove Panel
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart" [datasets]="ComboChartData" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="barChartType"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex.gt-xs="50" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Sales Report
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card3" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card3="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>more</mat-icon>
|
||||
View More
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Remove Panel
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart" [datasets]="bubbleChartData" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="bubbleChartType"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66" fxFlex="100" class="m-gap p-gap">
|
||||
<div class='profile' ontouchstart>
|
||||
<aside class='avatar'></aside>
|
||||
<section class='info'>
|
||||
<h1 class="mb-1 mr-1 ml-1">Gabrielle Wee</h1>
|
||||
<h2 class="mb-1 mr-1 ml-1">UI Designer</h2>
|
||||
<a class='follow'>+ Follow</a>
|
||||
<ul class="prof-list">
|
||||
<li>
|
||||
<a class='link' target='_blank'>
|
||||
<i class="fa fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class='link' target='_blank'>
|
||||
<i class="fa fa-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class='link' target='_blank'>
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<mat-card>
|
||||
<div class="wheather-widget text-center grad-blue">
|
||||
<div class="wheather-today">
|
||||
<h3 class="mb-3">Today</h3>
|
||||
<i class="wi wi-day-cloudy mat-text-accent"></i>
|
||||
<h3>13 ℃</h3>
|
||||
Surrey, Canada
|
||||
</div>
|
||||
<div class="wheather-future">
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" class="m-gap p-gap wheather-child">
|
||||
<p>Yesterday</p>
|
||||
<i class="wi wi-day-rain-mix mb-2 mat-text-primary"></i>
|
||||
<h3>13 ℃</h3>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" class="m-gap p-gap wheather-child">
|
||||
<p>Tomorrow</p>
|
||||
<i class="wi wi-day-cloudy-high mb-2 mat-text-primary"></i>
|
||||
<h3>13 ℃</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Recent Comments
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card3" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<hr>
|
||||
<div class="card-comment-widget">
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line>John Doe </h3>
|
||||
<p mat-line> Weekend - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> John Doe </h3>
|
||||
<p mat-line> Sunday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> Mellisha Whill </h3>
|
||||
<p mat-line> Sturday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> John Doe </h3>
|
||||
<p mat-line> Tuesday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> Meek Mill </h3>
|
||||
<p mat-line> Monday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> Kim Jama </h3>
|
||||
<p mat-line> Thursday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="column" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<!-- Post-->
|
||||
<div class="post-module">
|
||||
<!-- Thumbnail-->
|
||||
<div class="thumbnail">
|
||||
<div class="date">
|
||||
<div class="day">27</div>
|
||||
<div class="month">Mar</div>
|
||||
</div>
|
||||
<img src="assets/images/unsplash/1.jpg" />
|
||||
</div>
|
||||
<!-- Post Content-->
|
||||
<div class="post-content">
|
||||
<div class="category">Photos</div>
|
||||
<h1 class="title">City Lights in New York</h1>
|
||||
<div class="p-data">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam necessitatibus molestiae similique qui ad explicabo, laboriosam dolores autem maiores a.</p>
|
||||
</div>
|
||||
<div class="post-meta"><span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span><span class="comments"><i class="fa fa-comments"></i><a href="#"> 39 comments</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="66.66%" fxFlex="100" class="m-gap p-gap">
|
||||
<ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="0" [rowHeight]="'auto'">
|
||||
<ngx-datatable-column name="Project">
|
||||
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
|
||||
{{row['project']}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Due Date">
|
||||
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
|
||||
{{row['date'] | date: 'MMMM dd'}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Progress">
|
||||
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
|
||||
<mat-progress-bar mode="determinate" value="{{row['progress']}}" color="primary"></mat-progress-bar>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title>Newsfeed</mat-card-title>
|
||||
<mat-card-subtitle>Stories posted today</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="messages">
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="{{item.photo}}" alt="">
|
||||
<h3 mat-line> {{item.from}} </h3>
|
||||
<p mat-line> {{item.subject}} - {{item.message}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-blue icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-facebook fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Facebook</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" fxLayoutAlign="center center" class="m-gap p-gap mb-0">
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>31</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>11</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-green icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-twitter fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Twitter</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" fxLayoutAlign="center center" class="m-gap p-gap mb-0">
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>76</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>19</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-red icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-linkedin fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Linkedin</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" fxLayoutAlign="center center" class="m-gap p-gap mb-0">
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>9</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>21</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,539 +0,0 @@
|
||||
$red: #f5515f;
|
||||
$blue: #05abe0;
|
||||
$grey: #343434;
|
||||
$p: 12px;
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(white, .25);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
|
||||
&.pre-enter {
|
||||
transform-origin: center center;
|
||||
transform: scaleY(0);
|
||||
.avatar {
|
||||
transform-origin: center top;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
opacity: 0;
|
||||
transform: translateY(300px);
|
||||
}
|
||||
}
|
||||
&.on-enter {
|
||||
animation: scaleYIn 1000ms ease-out forwards;
|
||||
.avatar {
|
||||
animation: scaleYIn-small 750ms ease-out forwards 1000ms;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
opacity: 1;
|
||||
animation: slideInUp 1000ms ease-out forwards;
|
||||
}
|
||||
h1 {
|
||||
animation-delay: 1050ms;
|
||||
}
|
||||
h2 {
|
||||
animation-delay: 1100ms;
|
||||
}
|
||||
a.follow {
|
||||
animation-delay: 1250ms;
|
||||
}
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
a.link {
|
||||
animation-delay: 1300ms;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
a.link {
|
||||
animation-delay: 1350ms;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
a.link {
|
||||
animation-delay: 1400ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.info {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: url('../../assets/images/1.jpg') no-repeat center center / cover;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
|
||||
}
|
||||
|
||||
.prof-list {
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
h1 {
|
||||
padding: $p $p 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2,
|
||||
a.follow {
|
||||
display: block;
|
||||
|
||||
border-radius: 2px;
|
||||
padding: $p/2;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
background: $red;
|
||||
background: linear-gradient(135deg, rgba(#f5825f, 1) 0%, rgba(#f5005f, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f', GradientType=1);
|
||||
}
|
||||
a.follow {
|
||||
margin-left: $p;
|
||||
background: $blue;
|
||||
background: linear-gradient(135deg, rgba(#05c8e0, 1) 0%, rgba(#057fe0, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0', GradientType=1);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #05c8e0;
|
||||
background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%), 1) 0%, rgba(lighten(#057fe0, 10%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)', GradientType=1);
|
||||
}
|
||||
&:active {
|
||||
background: #057fe0;
|
||||
background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%), 1) 0%, rgba(darken(#057fe0, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)', GradientType=1);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $p/2;
|
||||
width: 100%;
|
||||
li {
|
||||
padding: $p/2;
|
||||
}
|
||||
}
|
||||
a.link {
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
background: $blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a.link {
|
||||
&.portfolio {
|
||||
background: #f5c8bf;
|
||||
background: linear-gradient(135deg, rgba(#f5c8bf, 1) 0%, rgba(#f58dbf, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#f5c8bf, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%), 1) 0%, rgba(lighten(#f58dbf, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#f5c8bf, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%), 1) 0%, rgba(darken(#f58dbf, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
|
||||
}
|
||||
}
|
||||
&.codepen {
|
||||
background: #fcd000;
|
||||
background: linear-gradient(135deg, rgba(#fcd000, 1) 0%, rgba(#fc9a00, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#fcd000, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%), 1) 0%, rgba(lighten(#fc9a00, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#fcd000, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#fcd000, 5%), 1) 0%, rgba(darken(#fc9a00, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
|
||||
}
|
||||
}
|
||||
&.github {
|
||||
background: #41adc4;
|
||||
background: linear-gradient(135deg, rgba(#41adc4, 1) 0%, rgba(#4183c4, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#4183c4, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#41adc4, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%), 1) 0%, rgba(lighten(#4183c4, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#41adc4, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#41adc4, 5%), 1) 0%, rgba(darken(#4183c4, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 470px) {
|
||||
.profile {
|
||||
display: flex;
|
||||
&.pre-enter {
|
||||
transform: scaleX(0);
|
||||
.avatar {
|
||||
transform-origin: left center;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
}
|
||||
&.on-enter {
|
||||
animation-name: scaleXIn;
|
||||
.avatar {
|
||||
animation-name: scaleXIn-small;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
.background {
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.avatar,
|
||||
.info {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.avatar {
|
||||
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 470px) and (min-height: 600px) {
|
||||
.profile {
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/jIUq3E */
|
||||
|
||||
@keyframes scaleXIn {
|
||||
0% {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/auuhcg */
|
||||
|
||||
@keyframes scaleYIn {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/dNBqrt */
|
||||
|
||||
@keyframes scaleXIn-small {
|
||||
0% {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/jZL0uj */
|
||||
|
||||
@keyframes scaleYIn-small {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/Ne0Mkr */
|
||||
|
||||
@keyframes slideInLeft {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/MSqtd5 */
|
||||
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//wheather
|
||||
.card-wheather {
|
||||
height: 220px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.city {
|
||||
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.grad-blue {
|
||||
background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grad-green {
|
||||
background: linear-gradient(58deg, #009688, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grad-red {
|
||||
background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
.card-wheather{
|
||||
padding: 2rem;
|
||||
}
|
||||
.temp {
|
||||
font-size: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1,226 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { single, multi } from './charts.data';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent {
|
||||
|
||||
public single: any[];
|
||||
public multi: any[];
|
||||
|
||||
public showXAxis = true;
|
||||
public showYAxis = true;
|
||||
public gradient = false;
|
||||
public showLegend = false;
|
||||
public showXAxisLabel = false;
|
||||
public xAxisLabel = 'Year';
|
||||
public showYAxisLabel = false;
|
||||
public yAxisLabel = 'Population';
|
||||
public colorScheme = {
|
||||
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
|
||||
};
|
||||
public autoScale = true;
|
||||
|
||||
rows = [];
|
||||
|
||||
// Shared chart options
|
||||
globalChartOptions: any = {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
|
||||
pieChartData: number[] = [300, 500, 100];
|
||||
doughnutOptions: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
doughnutChartColors: any[] = [{
|
||||
backgroundColor: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
|
||||
}];
|
||||
pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
pieChartType = 'pie';
|
||||
|
||||
// Bar
|
||||
barChartLabels: string[] = ['1', '2', '3', '4', '5', '6', '7'];
|
||||
barChartType = 'bar';
|
||||
barChartLegend = true;
|
||||
barChartData: any[] = [{
|
||||
data: [6, 5, 8, 8, 5, 5, 4],
|
||||
label: 'Series A',
|
||||
borderWidth: 0
|
||||
}, {
|
||||
data: [5, 4, 4, 2, 6, 2, 5],
|
||||
label: 'Series B',
|
||||
borderWidth: 0
|
||||
}];
|
||||
barChartOptions: any = Object.assign({
|
||||
scaleShowVerticalLines: false,
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
defaultFontColor: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
},
|
||||
stacked: true,
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
defaultFontColor: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
},
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
|
||||
// Bubble Chart
|
||||
bubbleChartData: Array <any> = [{
|
||||
data: [{
|
||||
x: 6,
|
||||
y: 5,
|
||||
r: 15,
|
||||
}, {
|
||||
x: 5,
|
||||
y: 4,
|
||||
r: 10,
|
||||
}, {
|
||||
x: 8,
|
||||
y: 4,
|
||||
r: 6,
|
||||
}, {
|
||||
x: 8,
|
||||
y: 4,
|
||||
r: 6,
|
||||
}, {
|
||||
x: 5,
|
||||
y: 14,
|
||||
r: 14,
|
||||
}, {
|
||||
x: 5,
|
||||
y: 6,
|
||||
r: 8,
|
||||
}, {
|
||||
x: 4,
|
||||
y: 2,
|
||||
r: 10,
|
||||
}],
|
||||
label: 'Series A',
|
||||
borderWidth: 1
|
||||
}];
|
||||
bubbleChartType = 'bubble';
|
||||
|
||||
// combo chart
|
||||
comboChartLabels: Array <any> = ['1', '2', '3', '4', '5', '6', '7'];
|
||||
chartColors: Array <any> = [{ // red
|
||||
backgroundColor: '#f44336',
|
||||
borderColor: '#f44336',
|
||||
pointBackgroundColor: '#f44336',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}, { // blue
|
||||
backgroundColor: '#7986cb',
|
||||
borderColor: '#3f51b5',
|
||||
pointBackgroundColor: '#3f51b5',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}, { // 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)'
|
||||
}];
|
||||
comboChartLegend = true;
|
||||
ComboChartData: Array <any> = [{
|
||||
data: [6, 5, 8, 8, 5, 5, 4],
|
||||
label: 'Series A',
|
||||
borderWidth: 1,
|
||||
type: 'line',
|
||||
fill: false
|
||||
}, {
|
||||
data: [5, 4, 4, 2, 6, 2, 5],
|
||||
label: 'Series B',
|
||||
borderWidth: 1,
|
||||
type: 'bar',
|
||||
}];
|
||||
ComboChartOptions: any = Object.assign({
|
||||
animation: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
suggestedMax: 9,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
|
||||
// newsfeed
|
||||
messages: Object[] = [{
|
||||
from: 'Carolyn',
|
||||
message: 'Contrary to popular belief, Lorem Ipsum',
|
||||
photo: 'assets/images/face3.jpg',
|
||||
subject: 'Met, consectetur adipisic',
|
||||
}, {
|
||||
from: 'Chloe',
|
||||
message: 'It has roots in a piece of classica',
|
||||
photo: 'assets/images/face6.jpg',
|
||||
subject: 'Consectetur adipisic',
|
||||
}, {
|
||||
from: 'Diana',
|
||||
message: 'Professor at Hampden-Sydney College in Virginia',
|
||||
photo: 'assets/images/face4.jpg',
|
||||
subject: 'Onsectetur adipisic',
|
||||
}, ];
|
||||
|
||||
constructor() {
|
||||
this.fetch((data) => { this.rows = data; });
|
||||
Object.assign(this, {single, multi})
|
||||
}
|
||||
|
||||
onSelect(event) {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
// project table
|
||||
fetch(cb) {
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', `assets/data/projects.json`);
|
||||
req.onload = () => {
|
||||
cb(JSON.parse(req.response));
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { NgxChartsModule} from '@swimlane/ngx-charts';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardRoutes } from './dashboard.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(DashboardRoutes),
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
MatButtonModule,
|
||||
MatListModule,
|
||||
MatProgressBarModule,
|
||||
MatMenuModule,
|
||||
ChartsModule,
|
||||
NgxChartsModule,
|
||||
NgxDatatableModule,
|
||||
FlexLayoutModule
|
||||
],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
|
||||
export class DashboardModule {}
|
||||
@ -1,8 +0,0 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
export const DashboardRoutes: Routes = [{
|
||||
path: '',
|
||||
component: DashboardComponent
|
||||
}];
|
||||
@ -1,533 +0,0 @@
|
||||
<div class="app search-i" [dir]="layoutDir" [ngClass]="[ menuLayout, selectedSidebarImage, selectedSidebarColor, selectedHeaderColor, collapsedClass]" [class.app-dark]="dark" [class.boxed]="boxed" [class.collapsed-sidebar]="collapseSidebar" [class.compact-sidebar]="compactSidebar" [class.bg-img-disable]="!sidebarBg">
|
||||
<mat-sidenav-container class="app-inner">
|
||||
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
|
||||
<div class="opt-side relative ">
|
||||
<div class="sidebar-container ">
|
||||
<div class="branding text-center">
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i>
|
||||
<span> {{userDep}}</span>
|
||||
|
||||
</h2>
|
||||
<span style="color:#fff">{{roles}}</span>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<div class="user-pro-wrap">
|
||||
<div class="user-profile-thumb text-center">
|
||||
<div class="user-i">
|
||||
<img src="assets/images/userpic.jpg" class="rad-full mb-1" width="100" height="100" alt="">
|
||||
<div *ngIf="currentUser !=''"> <span>{{currentUser.user_full_name}}</span></div>
|
||||
<div *ngIf="currentUser.user_full_name ==''"> <span>----</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="most-used text-center">
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>home</mat-icon>
|
||||
</a>
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>person</mat-icon>
|
||||
</a>
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<mat-nav-list appAccordion class="navigation relative">
|
||||
<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll()">
|
||||
<a appAccordionToggle class="relative" mat-ripple [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
|
||||
</a>
|
||||
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
|
||||
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item>
|
||||
<a (click)="addMenuItem()">
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-overlay"></div>
|
||||
</mat-sidenav>
|
||||
<mat-toolbar class="main-header">
|
||||
<div class="horizontal-top-bar w-100">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" autofocus="true" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="horizontal-logo">
|
||||
<div class="branding text-center">
|
||||
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{roles}})
|
||||
<!-- <h4>Welcome to {{currentUser.user_full_name}}</h4> -->
|
||||
</span>
|
||||
</h2>
|
||||
<!-- <h4><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{roles}}</span>
|
||||
</h4> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="menu-links">
|
||||
<button appToggleFullscreen mat-icon-button>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-1.jpg" alt="">
|
||||
Next Update for angular 5
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-2.jpg" alt="">
|
||||
Check out our new admin theme
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-3.jpg" alt="">
|
||||
Expedita quo, laboriosam officia.
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>show_chart</mat-icon>
|
||||
Charts
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>navigation</mat-icon>
|
||||
Maps
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
<button mat-menu-item (click)="userProfile()">
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-menu w-100">
|
||||
<button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form" fxShow="false" fxShow.gt-xs>
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" autofocus="true" />
|
||||
</form>
|
||||
</div>
|
||||
<span fxFlex></span>
|
||||
<button appToggleFullscreen mat-icon-button>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-1.jpg" alt="">
|
||||
Next Update for angular 5
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-2.jpg" alt="">
|
||||
Check out our new admin theme
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-3.jpg" alt="">
|
||||
Expedita quo, laboriosam officia.
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>show_chart</mat-icon>
|
||||
Charts
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>navigation</mat-icon>
|
||||
Maps
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
<button mat-menu-item (click)="userProfile()">
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div class="horizontal-menu text-center">
|
||||
<nav>
|
||||
<ul class="main-h-list">
|
||||
<li *ngFor="let menuitem of horizontalMenuItems.getAll()">
|
||||
<a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
</a>
|
||||
<a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
</a>
|
||||
<ul class="dropdown" *ngIf="menuitem.type === 'sub'">
|
||||
<li *ngFor="let childitem of menuitem.children">
|
||||
<a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
|
||||
<ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
|
||||
<li *ngFor="let subchild of childitem.subchildren">
|
||||
<a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="body-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
|
||||
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Today</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-list class="pt-1 pb-1">
|
||||
<mat-list-item>
|
||||
<div fxLayout="column">
|
||||
<h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
|
||||
<h6 class="mat-text-muted ma-0"><span>{{ today | date:'dd' }}</span> <span>{{ today | date:'MMMM' }}</span></h6>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<mat-nav-list>
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project A</p>
|
||||
<mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project B </p>
|
||||
<mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project C</p>
|
||||
<mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
|
||||
<p mat-line class="mat-text-muted text-mat">2:45PM</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
|
||||
<p mat-line class="mat-text-muted text-mat">3:20PM</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
|
||||
<p mat-line class="mat-text-muted text-mat">16:00PM</p>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Notifications</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-nav-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
|
||||
<h4 mat-line>Social</h4>
|
||||
<p mat-line> 5 new members joined today</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
|
||||
<h4 mat-line>Promotions</h4>
|
||||
<p mat-line>Updated your email
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
|
||||
<h4 mat-line>Updates</h4>
|
||||
<p mat-line> 15 new product added</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
|
||||
<h4 mat-line> 2 order cancelled</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar>check_circle</mat-icon>
|
||||
<h4 mat-line>System Scan completed</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar>person_add</mat-icon>
|
||||
<h4 mat-line>4 Users connected</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
<!-- Demo Purposes Only -->
|
||||
<button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
|
||||
<mat-icon class="mat-24">settings</mat-icon>
|
||||
</button>
|
||||
<mat-card class="settings-panel" *ngIf="showSettings">
|
||||
<mat-toolbar color="warn">
|
||||
<span fxFlex>Options</span>
|
||||
<button mat-icon-button (click)="showSettings = false">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-card-content class="demo-checkbox">
|
||||
<span class="mb-2 d-block"><strong>Sidebar Image</strong></span>
|
||||
<div class="bg-img clearfix">
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
|
||||
<a (click)="onSelectSidebarImage('bg-1')">
|
||||
<img src="assets/images/bg-5.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
|
||||
<a (click)="onSelectSidebarImage('bg-2')">
|
||||
<img src="assets/images/bg-2.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
|
||||
<a (click)="onSelectSidebarImage('bg-3')">
|
||||
<img src="assets/images/bg-3.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
|
||||
<a (click)="onSelectSidebarImage('bg-4')">
|
||||
<img src="assets/images/bg-4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-sidebar clearfix">
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
|
||||
</div>
|
||||
<span class="mb-2 d-block"><strong>Sidebar Color</strong></span>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
|
||||
Default</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
|
||||
Green</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
|
||||
Red</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
|
||||
Purple</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
|
||||
Pink</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
|
||||
Blue</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
|
||||
Green Deep</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
|
||||
Brown</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
|
||||
Orange</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-header clearfix">
|
||||
<span class="mb-2 d-block"><strong>Header Color</strong></span>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
|
||||
Default</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
|
||||
Green</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
|
||||
Red</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
|
||||
Purple</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
|
||||
Pink</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
|
||||
Blue</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
|
||||
Green Deep</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
|
||||
Brown</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
|
||||
Orange</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox (change)="changeMenuLayout($event.checked)">Horizontal Menu</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="dark" >Dark Mode</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')" >RTL</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-3">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Language" class="mt-1" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
|
||||
<mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- /Demo Purposes Only -->
|
||||
</div>
|
||||
|
||||
@ -1,224 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
|
||||
import { Router, NavigationEnd } from '@angular/router';
|
||||
import { MenuItems } from '../../shared/menu-items/menu-items';
|
||||
import { HorizontalMenuItems } from '../../shared/menu-items/horizontal-menu-items';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
|
||||
|
||||
import { TranslateService } from 'ng2-translate/ng2-translate';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { SharedService } from '../../shared.service';
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
templateUrl: './admin-layout.component.html'
|
||||
})
|
||||
export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
roles: string ='';
|
||||
userDep: string = '';
|
||||
currentUser: any = [];
|
||||
private _router: Subscription;
|
||||
|
||||
today: number = Date.now();
|
||||
url: string;
|
||||
showSettings = false;
|
||||
dark: boolean;
|
||||
boxed: boolean;
|
||||
collapseSidebar: boolean;
|
||||
compactSidebar: boolean;
|
||||
sidebarBg: boolean = true;
|
||||
currentLang = 'en';
|
||||
layoutDir = 'ltr';
|
||||
|
||||
menuLayout : any = 'vertical-menu';
|
||||
selectedSidebarImage : any = 'bg-1';
|
||||
selectedSidebarColor : any = 'sidebar-default';
|
||||
selectedHeaderColor : any = 'header-default';
|
||||
collapsedClass : any = 'side-panel-opened';
|
||||
|
||||
@ViewChild('sidemenu') sidemenu;
|
||||
public config: PerfectScrollbarConfigInterface = {};
|
||||
|
||||
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public shared:SharedService ) {
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.shared.getroles().subscribe(res=>{
|
||||
if(res.dataStatus == true){
|
||||
this.currentUser = res.records[0];
|
||||
console.log(this.currentUser);
|
||||
if(this.currentUser.fk_entity_id == 1 ){
|
||||
this.userDep = "SINEEGDE";
|
||||
}else if(this.currentUser.fk_entity_id ==2){
|
||||
this.userDep = "LENDOR";
|
||||
|
||||
}else{
|
||||
this.userDep = "VENDOR";
|
||||
}
|
||||
if(this.currentUser.user_role =="ADMIN"){
|
||||
this.roles = this.currentUser.user_role;
|
||||
}
|
||||
}
|
||||
});
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
const ps = new PerfectScrollbar(elemSidebar, {
|
||||
wheelSpeed: 2,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
|
||||
this.url = event.url;
|
||||
if (this.isOver()) {
|
||||
this.sidemenu.close();
|
||||
}
|
||||
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
// Ps.update(elemContent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick(e: any) {
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
setTimeout(() => {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
const ps = new PerfectScrollbar(elemSidebar, {
|
||||
wheelSpeed: 2,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
}, 350);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._router.unsubscribe();
|
||||
}
|
||||
|
||||
isOver(): boolean {
|
||||
if (this.url === '/apps/messages' || this.url === '/apps/calendar' || this.url === '/apps/media' || this.url === '/maps/leaflet') {
|
||||
return true;
|
||||
} else {
|
||||
return window.matchMedia(`(max-width: 960px)`).matches;
|
||||
}
|
||||
}
|
||||
|
||||
isMac(): boolean {
|
||||
let bool = false;
|
||||
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
|
||||
bool = true;
|
||||
}
|
||||
return bool;
|
||||
}
|
||||
|
||||
menuMouseOver(): void {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
|
||||
this.sidemenu.mode = 'over';
|
||||
}
|
||||
}
|
||||
|
||||
menuMouseOut(): void {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
|
||||
this.sidemenu.mode = 'side';
|
||||
}
|
||||
}
|
||||
|
||||
menuToggleFunc()
|
||||
{
|
||||
this.sidemenu.toggle();
|
||||
|
||||
if(this.collapsedClass == 'side-panel-opened')
|
||||
{
|
||||
this.collapsedClass = 'side-panel-closed';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.collapsedClass= 'side-panel-opened';
|
||||
}
|
||||
}
|
||||
|
||||
changeMenuLayout(value)
|
||||
{
|
||||
console.log(value)
|
||||
if(value)
|
||||
{
|
||||
this.menuLayout = 'top-menu';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.menuLayout = 'vertical-menu';
|
||||
}
|
||||
}
|
||||
|
||||
onSelectSidebarImage(selectedClass, event)
|
||||
{
|
||||
this.selectedSidebarImage = selectedClass;
|
||||
}
|
||||
|
||||
onSelectedSidebarColor(selectedClass)
|
||||
{
|
||||
this.selectedSidebarColor = selectedClass;
|
||||
}
|
||||
|
||||
onSelectedHeaderColor(selectedClass)
|
||||
{
|
||||
this.selectedHeaderColor = selectedClass;
|
||||
}
|
||||
|
||||
isBgActive(value)
|
||||
{
|
||||
if(value == this.selectedSidebarImage)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isSidebarActive(value)
|
||||
{
|
||||
if(value == this.selectedSidebarColor)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isHeaderActive(value)
|
||||
{
|
||||
if(value == this.selectedHeaderColor)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
addMenuItem(): void {
|
||||
this.menuItems.add({
|
||||
state: 'menu',
|
||||
name: 'MENU',
|
||||
type: 'sub',
|
||||
icon: 'trending_flat',
|
||||
children: [
|
||||
{state: 'menu', name: 'MENU'},
|
||||
{state: 'timelmenuine', name: 'MENU'}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
<mat-sidenav-container>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
@ -1,8 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
styles: [':host /deep/ .mat-sidenav-content {padding: 0;} .mat-sidenav-container {z-index: 1000}'],
|
||||
templateUrl: './auth-layout.component.html'
|
||||
})
|
||||
export class AuthLayoutComponent {}
|
||||
@ -1,53 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Autocomplete</mat-card-title>
|
||||
<mat-card-subtitle>Use auto-complete text fields to present real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50" fxFlex="100">
|
||||
<p>Reactive length: {{ reactiveStates.length }}</p>
|
||||
<p>Reactive value: {{ stateCtrl.value | json }}</p>
|
||||
<p>Reactive dirty: {{ stateCtrl.dirty }}</p>
|
||||
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="State" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<button mat-button (click)="stateCtrl.reset()">RESET</button>
|
||||
<button mat-button (click)="stateCtrl.setValue(states[10])">SET VALUE</button>
|
||||
<button mat-button (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">TOGGLE DISABLED</button>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50" fxFlex="100">
|
||||
<p> </p>
|
||||
<p>Template-driven value (currentState): {{ currentState }}</p>
|
||||
<p>Template-driven dirty: {{ modelDir.dirty }}</p>
|
||||
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
|
||||
(ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<button mat-button (click)="modelDir.reset()">RESET</button>
|
||||
<button mat-button (click)="currentState='California'">SET VALUE</button>
|
||||
<button mat-button (click)="tdDisabled=!tdDisabled">TOGGLE DISABLED</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
|
||||
<mat-option *ngFor="let state of reactiveStates | async" [value]="state">
|
||||
<span>{{ state.name }}</span>
|
||||
<span> ({{state.code}}) </span>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<mat-autocomplete #tdAuto="matAutocomplete">
|
||||
<mat-option *ngFor="let state of tdStates" [value]="state.name">
|
||||
<span>{{ state.name }}</span>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,96 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-autocomplete',
|
||||
templateUrl: './autocomplete.component.html',
|
||||
styleUrls: ['./autocomplete.component.scss']
|
||||
})
|
||||
export class AutocompleteComponent {
|
||||
|
||||
stateCtrl: FormControl;
|
||||
currentState = '';
|
||||
|
||||
reactiveStates: any;
|
||||
tdStates: any[];
|
||||
|
||||
tdDisabled = false;
|
||||
|
||||
tdAuto: string;
|
||||
|
||||
reactiveAuto: string;
|
||||
|
||||
states = [
|
||||
{code: 'AL', name: 'Alabama'},
|
||||
{code: 'AK', name: 'Alaska'},
|
||||
{code: 'AZ', name: 'Arizona'},
|
||||
{code: 'AR', name: 'Arkansas'},
|
||||
{code: 'CA', name: 'California'},
|
||||
{code: 'CO', name: 'Colorado'},
|
||||
{code: 'CT', name: 'Connecticut'},
|
||||
{code: 'DE', name: 'Delaware'},
|
||||
{code: 'FL', name: 'Florida'},
|
||||
{code: 'GA', name: 'Georgia'},
|
||||
{code: 'HI', name: 'Hawaii'},
|
||||
{code: 'ID', name: 'Idaho'},
|
||||
{code: 'IL', name: 'Illinois'},
|
||||
{code: 'IN', name: 'Indiana'},
|
||||
{code: 'IA', name: 'Iowa'},
|
||||
{code: 'KS', name: 'Kansas'},
|
||||
{code: 'KY', name: 'Kentucky'},
|
||||
{code: 'LA', name: 'Louisiana'},
|
||||
{code: 'ME', name: 'Maine'},
|
||||
{code: 'MD', name: 'Maryland'},
|
||||
{code: 'MA', name: 'Massachusetts'},
|
||||
{code: 'MI', name: 'Michigan'},
|
||||
{code: 'MN', name: 'Minnesota'},
|
||||
{code: 'MS', name: 'Mississippi'},
|
||||
{code: 'MO', name: 'Missouri'},
|
||||
{code: 'MT', name: 'Montana'},
|
||||
{code: 'NE', name: 'Nebraska'},
|
||||
{code: 'NV', name: 'Nevada'},
|
||||
{code: 'NH', name: 'New Hampshire'},
|
||||
{code: 'NJ', name: 'New Jersey'},
|
||||
{code: 'NM', name: 'New Mexico'},
|
||||
{code: 'NY', name: 'New York'},
|
||||
{code: 'NC', name: 'North Carolina'},
|
||||
{code: 'ND', name: 'North Dakota'},
|
||||
{code: 'OH', name: 'Ohio'},
|
||||
{code: 'OK', name: 'Oklahoma'},
|
||||
{code: 'OR', name: 'Oregon'},
|
||||
{code: 'PA', name: 'Pennsylvania'},
|
||||
{code: 'RI', name: 'Rhode Island'},
|
||||
{code: 'SC', name: 'South Carolina'},
|
||||
{code: 'SD', name: 'South Dakota'},
|
||||
{code: 'TN', name: 'Tennessee'},
|
||||
{code: 'TX', name: 'Texas'},
|
||||
{code: 'UT', name: 'Utah'},
|
||||
{code: 'VT', name: 'Vermont'},
|
||||
{code: 'VA', name: 'Virginia'},
|
||||
{code: 'WA', name: 'Washington'},
|
||||
{code: 'WV', name: 'West Virginia'},
|
||||
{code: 'WI', name: 'Wisconsin'},
|
||||
{code: 'WY', name: 'Wyoming'},
|
||||
];
|
||||
|
||||
constructor() {
|
||||
this.tdStates = this.states;
|
||||
this.stateCtrl = new FormControl({code: 'CA', name: 'California'});
|
||||
this.reactiveStates = this.stateCtrl.valueChanges
|
||||
.pipe(startWith(this.stateCtrl.value))
|
||||
.map(val => this.displayFn(val))
|
||||
.map(name => this.filterStates(name));
|
||||
}
|
||||
|
||||
displayFn(value: any): string {
|
||||
return value && typeof value === 'object' ? value.name : value;
|
||||
}
|
||||
|
||||
filterStates(val: string) {
|
||||
return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Buttons</mat-card-title>
|
||||
<mat-card-subtitle>mat-button is an HTML button or a tag enhanced with styling and animation to match the Material Design button spec</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="pb-1">
|
||||
<p>Flat buttons</p>
|
||||
<button mat-icon-button><mat-icon>favorite</mat-icon></button>
|
||||
<button mat-button class="mr-1 mb-1">Default</button>
|
||||
<button mat-button color="primary" class="mr-1 mb-1">Primary</button>
|
||||
<button mat-button color="accent" class="mr-1 mb-1">Accent</button>
|
||||
<button mat-button color="warn" class="mr-1 mb-1">Warn</button>
|
||||
<button mat-button disabled class="mr-1 mb-1">off</button>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Raised buttons</p>
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1"><mat-icon>favorite</mat-icon></button>
|
||||
<button mat-raised-button class="mr-1 mb-1">Default</button>
|
||||
<button mat-raised-button color="primary" class="mr-1 mb-1">Primary</button>
|
||||
<button mat-raised-button color="accent" class="mr-1 mb-1">Accent</button>
|
||||
<button mat-raised-button color="warn" class="mr-1 mb-1">Warn</button>
|
||||
<button mat-raised-button disabled class="mr-1 mb-1">off</button>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Small buttons</p>
|
||||
<button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1"><mat-icon>favorite</mat-icon></button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mb-1">Default</button>
|
||||
<button mat-raised-button mat-button-sm color="primary" class="mr-1 mb-1">Primary</button>
|
||||
<button mat-raised-button mat-button-sm color="accent" class="mr-1 mb-1">Accent</button>
|
||||
<button mat-raised-button mat-button-sm color="warn" class="mr-1 mb-1">Warn</button>
|
||||
<button mat-raised-button mat-button-sm disabled class="mr-1 mb-1">off</button>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Fab buttons</p>
|
||||
<button mat-fab class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
<button mat-fab disabled="" class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
<button mat-mini-fab class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
<button mat-mini-fab disabled class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
</div>
|
||||
|
||||
<div class="pb-0">
|
||||
<p>Button toggles</p>
|
||||
<mat-button-toggle class="mr-1 mb-1">Single toggle</mat-button-toggle>
|
||||
<mat-button-toggle-group name="alignment" class="mr-1 mb-1">
|
||||
<mat-button-toggle value="left"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle value="right"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle value="justify"><mat-icon>format_align_justify</mat-icon></mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
<mat-button-toggle-group multiple class="mr-1 mb-1">
|
||||
<mat-button-toggle>Flour</mat-button-toggle>
|
||||
<mat-button-toggle>Eggs</mat-button-toggle>
|
||||
<mat-button-toggle disabled>Sugar</mat-button-toggle>
|
||||
<mat-button-toggle>Milk</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,10 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-buttons',
|
||||
templateUrl: './buttons.component.html',
|
||||
styleUrls: ['./buttons.component.scss']
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Cards</mat-card-title>
|
||||
<mat-card-subtitle>mat-card is a content container component that conforms to the spec of a Material Design card.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-content>Hello</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-subtitle>Subtitle</mat-card-subtitle>
|
||||
<mat-card-title>Card with title and footer</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p>This is supporting text.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button>LIKE</button>
|
||||
<button mat-button>SHARE</button>
|
||||
</mat-card-actions>
|
||||
<mat-card-footer>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
<mat-card class="mat-card-flat mb-2">
|
||||
<mat-card-title>Easily customizable</mat-card-title>
|
||||
<mat-card-actions>
|
||||
<button mat-button>First</button>
|
||||
<button mat-button>Second</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Standard Card</mat-card-title>
|
||||
<mat-card-subtitle>Subtitle</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Standard card with content</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
|
||||
</mat-card-content>
|
||||
<hr>
|
||||
<mat-card-actions>
|
||||
<button mat-button color="accent">Action</button>
|
||||
<button mat-button>Cancel</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-header>
|
||||
<img mat-card-avatar src="assets/images/avatar.jpg">
|
||||
<mat-card-title>Header title</mat-card-title>
|
||||
<mat-card-subtitle>Header subtitle</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<img mat-card-image src="assets/images/coridoor.jpg">
|
||||
<mat-card-content>
|
||||
<p>Here is some more content</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title-group>
|
||||
<img width="60" src="assets/images/curve.jpg">
|
||||
<mat-card-title>Card with title</mat-card-title>
|
||||
<mat-card-subtitle>Subtitle</mat-card-subtitle>
|
||||
</mat-card-title-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,10 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-cards',
|
||||
templateUrl: './cards.component.html',
|
||||
styleUrls: ['./cards.component.scss']
|
||||
})
|
||||
export class CardsComponent {
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Checkbox</mat-card-title>
|
||||
<mat-card-subtitle>mat-checkbox is a Material Design selection control that allows users to make a binary choice for a predetermined conditioned</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<form class="mb-1">
|
||||
<mat-checkbox [(ngModel)]="isChecked"
|
||||
name="cb"
|
||||
color="checkboxColor()"
|
||||
(change)="isIndeterminate = false"
|
||||
[indeterminate]="isIndeterminate"
|
||||
[disabled]="isDisabled">
|
||||
Do you want to <em>foobar</em> the <em>bazquux</em>?
|
||||
</mat-checkbox> - <strong>{{printResult()}}</strong>
|
||||
</form>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<div>
|
||||
<input id="indeterminate-toggle"
|
||||
type="checkbox"
|
||||
[(ngModel)]="isIndeterminate"
|
||||
[disabled]="isDisabled">
|
||||
<label for="indeterminate-toggle" class="mr-xs">Toggle Indeterminate</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="disabled-toggle" type="checkbox" [(ngModel)]="isDisabled">
|
||||
<label for="disabled-toggle" class="mr-xs">Toggle Disabled</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="color-toggle" type="checkbox" [(ngModel)]="useAlternativeColor">
|
||||
<label for="color-toggle">Toggle Color</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<p class="mr-xs">Alignment:</p>
|
||||
<div class="mr-xs">
|
||||
<input #start type="radio"
|
||||
value="start"
|
||||
id="align-start"
|
||||
name="alignment"
|
||||
(click)="alignment = start.value"
|
||||
checked>
|
||||
<label for="align-start">Start</label>
|
||||
</div>
|
||||
<div>
|
||||
<input #end type="radio"
|
||||
value="end"
|
||||
id="align-end"
|
||||
name="alignment"
|
||||
(click)="alignment = end.value">
|
||||
<label for="align-end">End</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Nested Checklist</p>
|
||||
<app-mat-checkbox-demo-nested-checklist></app-mat-checkbox-demo-nested-checklist>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,7 +0,0 @@
|
||||
:host /deep/ {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface Task {
|
||||
name: string;
|
||||
completed: boolean;
|
||||
subtasks?: Task[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-checkbox',
|
||||
templateUrl: './checkbox.component.html',
|
||||
styleUrls: ['./checkbox.component.scss']
|
||||
})
|
||||
export class CheckboxComponent {
|
||||
|
||||
isIndeterminate = false;
|
||||
isChecked = false;
|
||||
isDisabled = false;
|
||||
alignment = 'start';
|
||||
useAlternativeColor = false;
|
||||
|
||||
constructor() {}
|
||||
|
||||
printResult() {
|
||||
if (this.isIndeterminate) {
|
||||
return 'Maybe!';
|
||||
}
|
||||
return this.isChecked ? 'Yes!' : 'No!';
|
||||
}
|
||||
|
||||
checkboxColor() {
|
||||
return this.useAlternativeColor ? 'primary' : 'accent';
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-mat-checkbox-demo-nested-checklist',
|
||||
styles: [`
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
`],
|
||||
templateUrl: './nested-checklist.html',
|
||||
})
|
||||
export class MatCheckboxDemoNestedChecklistComponent {
|
||||
tasks: Task[] = [{
|
||||
name: 'Reminders',
|
||||
completed: false,
|
||||
subtasks: [{
|
||||
name: 'Cook Dinner',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Read the Material Design Spec',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Upgrade Application to Angular2',
|
||||
completed: false
|
||||
}]
|
||||
}, {
|
||||
name: 'Groceries',
|
||||
completed: false,
|
||||
subtasks: [{
|
||||
name: 'Organic Eggs',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Protein Powder',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Almond Meal Flour',
|
||||
completed: false
|
||||
}]
|
||||
}];
|
||||
|
||||
allComplete(task: Task): boolean {
|
||||
const subtasks = task.subtasks;
|
||||
return subtasks.every(t => t.completed) ? true : subtasks.every(t => !t.completed) ? false : task.completed;
|
||||
}
|
||||
|
||||
someComplete(tasks: Task[]): boolean {
|
||||
const numComplete = tasks.filter(t => t.completed).length;
|
||||
return numComplete > 0 && numComplete < tasks.length;
|
||||
}
|
||||
|
||||
setAllCompleted(tasks: Task[], completed: boolean) {
|
||||
tasks.forEach(t => t.completed = completed);
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-toolbar color="primary">
|
||||
<span>Tasks</span>
|
||||
</mat-toolbar>
|
||||
<mat-card-content>
|
||||
<ul>
|
||||
<li *ngFor="let task of tasks">
|
||||
<mat-checkbox [(ngModel)]="task.completed"
|
||||
[checked]="allComplete(task)"
|
||||
[indeterminate]="someComplete(task.subtasks)"
|
||||
(change)="setAllCompleted(task.subtasks, $event.checked)">
|
||||
<h6 class="ma-0">{{task.name}}</h6>
|
||||
</mat-checkbox>
|
||||
<ul class="ml-3">
|
||||
<li *ngFor="let subtask of task.subtasks">
|
||||
<mat-checkbox [(ngModel)]="subtask.completed">
|
||||
{{subtask.name}}
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,65 +0,0 @@
|
||||
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Chips</mat-card-title>
|
||||
<mat-card-subtitle>an input component for building lists of strings or objects. The list items are displayed as 'chips'.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="pb-1">
|
||||
<p class="mt-0">Simple</p>
|
||||
<mat-chip-list>
|
||||
<mat-chip>Chip 1</mat-chip>
|
||||
<mat-chip>Chip 2</mat-chip>
|
||||
<mat-chip>Chip 3</mat-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Unstyled</p>
|
||||
<mat-chip-list>
|
||||
<mat-basic-chip>Basic Chip 1</mat-basic-chip>
|
||||
<mat-basic-chip>Basic Chip 2</mat-basic-chip>
|
||||
<mat-basic-chip>Basic Chip 3</mat-basic-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
||||
<p>Advanced</p>
|
||||
<mat-chip-list selectable="false">
|
||||
<mat-chip color="accent" selected="true">Selected/Colored</mat-chip>
|
||||
<mat-chip color="warn" selected="true" *ngIf="visible"
|
||||
(destroy)="alert('chip destroyed')" (click)="toggleVisible()">
|
||||
With Events
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Dynamic Chips</mat-card-title>
|
||||
<mat-card-subtitle>an input component for building lists of strings or objects. The list items are displayed as 'chips'.</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<div class="pb-1">
|
||||
<p class="mt-0">Input Container</p>
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngFor="let person of people" [color]="color">
|
||||
{{person.name}}
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
|
||||
<mat-form-field class="mt-1">
|
||||
<input matInput #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<p>Stacked Chips</p>
|
||||
<p>
|
||||
You can also stack the chips if you want them on top of each other and/or use the
|
||||
<code>(focus)</code> event to run custom code.
|
||||
</p>
|
||||
<mat-chip-list class="mat-chip-list-stacked">
|
||||
<mat-chip *ngFor="let aColor of availableColors"
|
||||
(focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
|
||||
{{aColor.name}}
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,58 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface Person {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface DemoColor {
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chips',
|
||||
templateUrl: './chips.component.html',
|
||||
styleUrls: ['./chips.component.scss']
|
||||
})
|
||||
export class ChipsComponent implements OnInit {
|
||||
|
||||
visible = true;
|
||||
color = '';
|
||||
|
||||
people: Person[] = [
|
||||
{ name: 'Kara' },
|
||||
{ name: 'Jeremy' },
|
||||
{ name: 'Topher' },
|
||||
{ name: 'Elad' },
|
||||
{ name: 'Kristiyan' },
|
||||
{ name: 'Paul' }
|
||||
];
|
||||
|
||||
availableColors: DemoColor[] = [
|
||||
{ name: 'none', color: '' },
|
||||
{ name: 'Primary', color: 'primary' },
|
||||
{ name: 'Accent', color: 'accent' },
|
||||
{ name: 'Warn', color: 'warn' }
|
||||
];
|
||||
|
||||
alert(message: string): void {
|
||||
alert(message);
|
||||
}
|
||||
|
||||
add(input: HTMLInputElement): void {
|
||||
if (input.value && input.value.trim() !== '') {
|
||||
this.people.push({ name: input.value.trim() });
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
toggleVisible(): void {
|
||||
this.visible = false;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
<mat-card class="demo-dialog-card">
|
||||
<mat-card-title>Dialog</mat-card-title>
|
||||
<mat-card-subtitle>matDialog is a service, which opens dialogs components in the view.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<button mat-raised-button color="primary" (click)="open()" [disabled]="dialogRef">Open dialog</button>
|
||||
|
||||
<p>Dialog dimensions</p>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.width" placeholder="Width">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.height" placeholder="Height">
|
||||
</mat-form-field>
|
||||
|
||||
<p>Dialog position</p>
|
||||
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right">
|
||||
</mat-form-field>
|
||||
|
||||
<p>Other options</p>
|
||||
<mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
|
||||
|
||||
<p>Last close result: {{lastCloseResult}}</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,47 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dialog',
|
||||
templateUrl: './dialog.component.html',
|
||||
styleUrls: ['./dialog.component.scss']
|
||||
})
|
||||
export class DialogComponent {
|
||||
|
||||
lastCloseResult: string;
|
||||
config: MatDialogConfig = {
|
||||
disableClose: false,
|
||||
width: '',
|
||||
height: '',
|
||||
position: {
|
||||
top: '',
|
||||
bottom: '',
|
||||
left: '',
|
||||
right: ''
|
||||
}
|
||||
};
|
||||
|
||||
constructor(public dialog: MatDialog) {}
|
||||
|
||||
open() {
|
||||
let dialogRef = this.dialog.open(JazzDialogComponent, this.config);
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.lastCloseResult = result;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-jazz-dialog',
|
||||
template: `
|
||||
<h5 class="mt-0">Maecenas faucibus mollis interdum.</h5>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="How much?" #howMuch type="number" style="width: 100%;">
|
||||
</mat-form-field>
|
||||
<p> {{ jazzMessage }} </p>
|
||||
<button mat-button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>`
|
||||
})
|
||||
export class JazzDialogComponent {
|
||||
jazzMessage = 'Jazzy jazz jazz';
|
||||
constructor(public dialogRef: MatDialogRef <JazzDialogComponent> ) {}
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Grid List</mat-card-title>
|
||||
<mat-card-subtitle>mat-grid-list is an alternative list view that arranges cells into grid-based layout.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-tab-group>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Fixed height</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
|
||||
<mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
|
||||
[style.background]="tile.color">
|
||||
{{tile.text}}
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change list cols" type="number" [(ngModel)]="fixedCols">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change row height" type="number" [(ngModel)]="fixedRowHeight">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<hr>
|
||||
<mat-card-actions>
|
||||
<button mat-button (click)="addTileCols()" color="primary">ADD COLSPAN (THREE)</button>
|
||||
</mat-card-actions>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Ratio height</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
|
||||
<mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
|
||||
{{tile.text}}
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change ratio" [(ngModel)]="ratio">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Fit height</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
|
||||
[style.height]="fitListHeight">
|
||||
<mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
|
||||
{{tile.text}}
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Headers</ng-template>
|
||||
<mat-card-content class="pa-0">
|
||||
<mat-grid-list cols="3" rowHeight="200px">
|
||||
<mat-grid-tile *ngFor="let dog of dogs" style="background:gray">
|
||||
<mat-grid-tile-header>
|
||||
<mat-icon mat-grid-avatar>info_outline</mat-icon>
|
||||
{{dog.name}}
|
||||
</mat-grid-tile-header>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Footers</ng-template>
|
||||
<mat-card-content class="pa-0">
|
||||
<mat-grid-list cols="3" rowHeight="200px">
|
||||
<mat-grid-tile *ngFor="let dog of dogs">
|
||||
<img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
|
||||
<mat-grid-tile-footer>
|
||||
<h3 mat-line>{{dog.name}}</h3>
|
||||
<span mat-line>Human: {{dog.human}}</span>
|
||||
<mat-icon>star_border</mat-icon>
|
||||
</mat-grid-tile-footer>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
@ -1,64 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-grid',
|
||||
templateUrl: './grid.component.html',
|
||||
styleUrls: ['./grid.component.scss']
|
||||
})
|
||||
export class GridComponent {
|
||||
|
||||
tiles: any[] = [{
|
||||
text: 'One',
|
||||
cols: 3,
|
||||
rows: 1,
|
||||
color: 'lightblue'
|
||||
}, {
|
||||
text: 'Two',
|
||||
cols: 1,
|
||||
rows: 2,
|
||||
color: 'lightgreen'
|
||||
}, {
|
||||
text: 'Three',
|
||||
cols: 1,
|
||||
rows: 1,
|
||||
color: 'lightpink'
|
||||
}, {
|
||||
text: 'Four',
|
||||
cols: 2,
|
||||
rows: 1,
|
||||
color: '#DDBDF1'
|
||||
}];
|
||||
|
||||
dogs: Object[] = [{
|
||||
name: 'Porter',
|
||||
human: 'Kara'
|
||||
}, {
|
||||
name: 'Mal',
|
||||
human: 'Jeremy'
|
||||
}, {
|
||||
name: 'Koby',
|
||||
human: 'Igor'
|
||||
}, {
|
||||
name: 'Razzle',
|
||||
human: 'Ward'
|
||||
}, {
|
||||
name: 'Molly',
|
||||
human: 'Rob'
|
||||
}, {
|
||||
name: 'Husi',
|
||||
human: 'Matias'
|
||||
}];
|
||||
|
||||
basicRowHeight = 80;
|
||||
fixedCols = 4;
|
||||
fixedRowHeight = 200;
|
||||
ratioGutter = 1;
|
||||
fitListHeight = '400px';
|
||||
ratio = '4:1';
|
||||
|
||||
addTileCols() {
|
||||
this.tiles[2].cols++;
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@ -1,98 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Input</mat-card-title>
|
||||
<mat-card-subtitle>Inputs are the basic input component of Material 2</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Password" type="password">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Email" type="email">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field position="end" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="amount">
|
||||
<span matPrefix>$ </span>
|
||||
<span matSuffix>.00</span>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Character count (100 max)" maxLength="100"
|
||||
value="Hello world. How are you?"
|
||||
#characterCountHintExample>
|
||||
<mat-hint position="end">{{characterCountHintExample.characterCount}} / 100</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Default Color" value="example">
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Accent Color" value="example">
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Warn Color" value="example">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Default Color" value="example"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Accent Color" value="example"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Warn Color" value="example"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
|
||||
value="Hello world. How are you?"
|
||||
#characterCountHintExample></textarea>
|
||||
<mat-hint position="end">{{characterCountHintExample.characterCount}} / 100</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput disabled placeholder="Disabled field" value="Value">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput required placeholder="Required field">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field hintLabel="Hint label" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Show Hint Label">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field hintLabel="Hint label" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Show Hint Label With Character Count">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<div class="ml-xs mr-xs" style="width: 100%;">Hello <mat-form-field dividerColor="accent"><input matInput [(ngModel)]="name" type="text" placeholder="First name"></mat-form-field>, how are you?</div>
|
||||
|
||||
<mat-form-field style="width: 100%;">
|
||||
<input matInput>
|
||||
<mat-placeholder>
|
||||
I <mat-icon class="demo-icons">favorite</mat-icon> <b>bold</b> placeholder
|
||||
</mat-placeholder>
|
||||
<mat-hint>
|
||||
I also <mat-icon class="demo-icons">home</mat-icon> <i>italic</i> hint labels
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var __decorate = this && this.__decorate || function(e, t, o, n) {
|
||||
var r, p = arguments.length, u = p < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n;
|
||||
if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) u = Reflect.decorate(e, t, o, n); else for (var c = e.length - 1; c >= 0; c--) (r = e[c]) && (u = (p < 3 ? r(u) : p > 3 ? r(t, o, u) : r(t, o)) || u);
|
||||
return p > 3 && u && Object.defineProperty(t, o, u), u;
|
||||
};
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: !0
|
||||
});
|
||||
|
||||
var core_1 = require("@angular/core"), max = 5, InputComponent = function() {
|
||||
function e() {
|
||||
this.items = [ {
|
||||
value: 10
|
||||
}, {
|
||||
value: 20
|
||||
}, {
|
||||
value: 30
|
||||
}, {
|
||||
value: 40
|
||||
}, {
|
||||
value: 50
|
||||
} ], this.rows = 8;
|
||||
}
|
||||
return e.prototype.addABunch = function(e) {
|
||||
for (var t = 0; t < e; t++) this.items.push({
|
||||
value: ++max
|
||||
});
|
||||
}, e;
|
||||
}();
|
||||
|
||||
InputComponent = __decorate([ core_1.Component({
|
||||
selector: "app-input",
|
||||
templateUrl: "./input.component.html",
|
||||
styleUrls: [ "./input.component.scss" ]
|
||||
}) ], InputComponent), exports.InputComponent = InputComponent;
|
||||
@ -1,40 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
let max = 5;
|
||||
|
||||
@Component({
|
||||
selector: 'app-input',
|
||||
templateUrl: './input.component.html',
|
||||
styleUrls: ['./input.component.scss']
|
||||
})
|
||||
export class InputComponent {
|
||||
|
||||
dividerColor: boolean;
|
||||
requiredField: boolean;
|
||||
floatingLabel: boolean;
|
||||
name: string;
|
||||
|
||||
items: any[] = [{
|
||||
value: 10
|
||||
}, {
|
||||
value: 20
|
||||
}, {
|
||||
value: 30
|
||||
}, {
|
||||
value: 40
|
||||
}, {
|
||||
value: 50
|
||||
}];
|
||||
|
||||
rows = 8;
|
||||
|
||||
addABunch(n: number) {
|
||||
for (let x = 0; x < n; x++) {
|
||||
this.items.push({
|
||||
value: ++max
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@ -1,145 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Lists</mat-card-title>
|
||||
<mat-card-subtitle>mat-list is a container component that wraps and formats a series of line items</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Normal lists</p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Items</h3>
|
||||
<mat-list-item *ngFor="let item of items">
|
||||
{{item}}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Multiline lists <button (click)="thirdLine=!thirdLine">Show third line</button></p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let contact of contacts">
|
||||
<h3 mat-line>{{contact.name}}</h3>
|
||||
<p mat-line *ngIf="thirdLine">extra line</p>
|
||||
<p mat-line>{{contact.headline}}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>3 Line List Item with Avatars and Icons</p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Today</h3>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line>
|
||||
<span>{{message.subject}} -- </span>
|
||||
<span class="text-mat mat-text-muted">{{message.message}}</span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line> {{message.subject}} </p>
|
||||
<p mat-line class="text-mat mat-text-muted">{{message.message}} </p>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<mat-icon mat-list-avatar>person</mat-icon>
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line>
|
||||
<span>{{message.subject}} -- </span>
|
||||
<span class="text-mat mat-text-muted">{{message.message}}</span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Dense lists</p>
|
||||
<mat-card>
|
||||
<mat-list dense>
|
||||
<h3 mat-subheader>Items</h3>
|
||||
<mat-list-item *ngFor="let item of items">
|
||||
{{item}}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Multiline dense list</p>
|
||||
<mat-card>
|
||||
<mat-list dense>
|
||||
<mat-list-item *ngFor="let contact of contacts">
|
||||
<h3 mat-line>{{contact.name}}</h3>
|
||||
<p mat-line>{{contact.headline}}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>3 Line List Item with Avatars and Icons</p>
|
||||
<mat-card>
|
||||
<mat-list dense>
|
||||
<h3 mat-subheader>Today</h3>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line> {{message.subject}} </p>
|
||||
<p mat-line>{{message.message}} </p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Checkbox list</p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<ng-template ngFor let-todo [ngForOf]="todos">
|
||||
<mat-list-item>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
|
||||
<div fxFlex>
|
||||
<mat-checkbox [checked]="todo.finished">
|
||||
{{todo.name}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div><mat-icon>more_horiz</mat-icon></div>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Nav lists</p>
|
||||
<mat-card>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item *ngFor="let link of links" href="http://www.google.com">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
<hr>
|
||||
<mat-nav-list>
|
||||
<h3 mat-subheader *ngIf="infoClicked">More info!</h3>
|
||||
<mat-list-item *ngFor="let link of links">
|
||||
<a mat-line href="http://www.google.com">{{ link.name }}</a>
|
||||
<button mat-icon-button (click)="infoClicked=!infoClicked">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
<hr>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item *ngFor="let link of links" href="http://www.google.com">
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<span mat-line>{{ link.name }}</span>
|
||||
<span mat-line> Description </span>
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
<hr>
|
||||
<mat-nav-list dense>
|
||||
<mat-list-item *ngFor="let link of links">
|
||||
<a mat-line href="http://www.google.com">{{ link.name }}</a>
|
||||
<button mat-icon-button (click)="infoClicked=!infoClicked">
|
||||
<mat-icon class="material-icons">info</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-lists',
|
||||
templateUrl: './lists.component.html',
|
||||
styleUrls: ['./lists.component.scss']
|
||||
})
|
||||
export class ListsComponent {
|
||||
|
||||
todos: Object[] = [{
|
||||
finished: true,
|
||||
name: 'Learn Angular 2.0',
|
||||
}, {
|
||||
finished: true,
|
||||
name: 'Learn Angular Material 2.0',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Build examples',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Documentation',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Write about your findings',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Contribute back to the community',
|
||||
}];
|
||||
|
||||
items: string[] = ['Pepper', 'Salt', 'Paprika'];
|
||||
|
||||
contacts: any[] = [{
|
||||
name: 'Nancy',
|
||||
headline: 'Software engineer'
|
||||
}, {
|
||||
name: 'Mary',
|
||||
headline: 'TPM'
|
||||
}, {
|
||||
name: 'Bobby',
|
||||
headline: 'UX designer'
|
||||
}];
|
||||
|
||||
messages: any[] = [{
|
||||
from: 'Nancy',
|
||||
subject: 'Brunch?',
|
||||
message: 'Did you want to go on Sunday? I was thinking that might work.',
|
||||
image: 'https://angular.io/resources/images/bios/julie-ralph.jpg'
|
||||
}, {
|
||||
from: 'Mary',
|
||||
subject: 'Summer BBQ',
|
||||
message: 'Wish I could come, but I have some prior obligations.',
|
||||
image: 'https://angular.io/resources/images/bios/juleskremer.jpg'
|
||||
}, {
|
||||
from: 'Bobby',
|
||||
subject: 'Oui oui',
|
||||
message: 'Do you have Paris reservations for the 15th? I just booked!',
|
||||
image: 'https://angular.io/resources/images/bios/jelbourn.jpg'
|
||||
}];
|
||||
|
||||
links: any[] = [{
|
||||
name: 'Inbox'
|
||||
}, {
|
||||
name: 'Outbox'
|
||||
}, {
|
||||
name: 'Spam'
|
||||
}, {
|
||||
name: 'Trash'
|
||||
}];
|
||||
|
||||
thirdLine = false;
|
||||
infoClicked = false;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import { DemoMaterialModule } from '../shared/demo.module';
|
||||
import 'hammerjs';
|
||||
|
||||
import { MaterialRoutes } from './material.routing';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { CardsComponent } from './cards/cards.component';
|
||||
import { InputComponent } from './input/input.component';
|
||||
import { CheckboxComponent, MatCheckboxDemoNestedChecklistComponent } from './checkbox/checkbox.component';
|
||||
import { RadioComponent } from './radio/radio.component';
|
||||
import { ToolbarComponent } from './toolbar/toolbar.component';
|
||||
import { ListsComponent } from './lists/lists.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { ProgressComponent } from './progress/progress.component';
|
||||
import { TabsComponent } from './tabs/tabs.component';
|
||||
import { ToggleComponent } from './toggle/toggle.component';
|
||||
import { TooltipComponent } from './tooltip/tooltip.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
import { SliderComponent } from './slider/slider.component';
|
||||
import { SnackbarComponent } from './snackbar/snackbar.component';
|
||||
import { DialogComponent } from './dialog/dialog.component';
|
||||
import { SelectComponent } from './select/select.component';
|
||||
import { AutocompleteComponent } from './autocomplete/autocomplete.component';
|
||||
import { ChipsComponent } from './chips/chips.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(MaterialRoutes),
|
||||
HttpModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
DemoMaterialModule,
|
||||
FlexLayoutModule
|
||||
],
|
||||
declarations: [
|
||||
ButtonsComponent,
|
||||
CardsComponent,
|
||||
InputComponent,
|
||||
CheckboxComponent,
|
||||
MatCheckboxDemoNestedChecklistComponent,
|
||||
RadioComponent,
|
||||
ToolbarComponent,
|
||||
ListsComponent,
|
||||
GridComponent,
|
||||
ProgressComponent,
|
||||
TabsComponent,
|
||||
ToggleComponent,
|
||||
TooltipComponent,
|
||||
MenuComponent,
|
||||
SliderComponent,
|
||||
SnackbarComponent,
|
||||
DialogComponent,
|
||||
SelectComponent,
|
||||
AutocompleteComponent,
|
||||
ChipsComponent
|
||||
],
|
||||
})
|
||||
|
||||
export class MaterialComponentsModule {}
|
||||
@ -1,85 +0,0 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { CardsComponent } from './cards/cards.component';
|
||||
import { InputComponent } from './input/input.component';
|
||||
import { CheckboxComponent } from './checkbox/checkbox.component';
|
||||
import { RadioComponent } from './radio/radio.component';
|
||||
import { ToolbarComponent } from './toolbar/toolbar.component';
|
||||
import { ListsComponent } from './lists/lists.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { ProgressComponent } from './progress/progress.component';
|
||||
import { TabsComponent } from './tabs/tabs.component';
|
||||
import { ToggleComponent } from './toggle/toggle.component';
|
||||
import { TooltipComponent } from './tooltip/tooltip.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
import { SliderComponent } from './slider/slider.component';
|
||||
import { SnackbarComponent } from './snackbar/snackbar.component';
|
||||
import { DialogComponent } from './dialog/dialog.component';
|
||||
import { SelectComponent } from './select/select.component';
|
||||
import { AutocompleteComponent } from './autocomplete/autocomplete.component';
|
||||
import { ChipsComponent } from './chips/chips.component';
|
||||
|
||||
export const MaterialRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [{
|
||||
path: 'button',
|
||||
component: ButtonsComponent
|
||||
}, {
|
||||
path: 'cards',
|
||||
component: CardsComponent
|
||||
}, {
|
||||
path: 'input',
|
||||
component: InputComponent
|
||||
}, {
|
||||
path: 'checkbox',
|
||||
component: CheckboxComponent
|
||||
}, {
|
||||
path: 'radio',
|
||||
component: RadioComponent
|
||||
}, {
|
||||
path: 'toolbar',
|
||||
component: ToolbarComponent
|
||||
}, {
|
||||
path: 'lists',
|
||||
component: ListsComponent
|
||||
}, {
|
||||
path: 'grid',
|
||||
component: GridComponent
|
||||
}, {
|
||||
path: 'progress',
|
||||
component: ProgressComponent
|
||||
}, {
|
||||
path: 'tabs',
|
||||
component: TabsComponent
|
||||
}, {
|
||||
path: 'switch',
|
||||
component: ToggleComponent
|
||||
}, {
|
||||
path: 'tooltip',
|
||||
component: TooltipComponent
|
||||
}, {
|
||||
path: 'menu',
|
||||
component: MenuComponent
|
||||
}, {
|
||||
path: 'slider',
|
||||
component: SliderComponent
|
||||
}, {
|
||||
path: 'snackbar',
|
||||
component: SnackbarComponent
|
||||
}, {
|
||||
path: 'dialog',
|
||||
component: DialogComponent
|
||||
}, {
|
||||
path: 'select',
|
||||
component: SelectComponent
|
||||
}, {
|
||||
path: 'autocomplete',
|
||||
component: AutocompleteComponent
|
||||
}, {
|
||||
path: 'chips',
|
||||
component: ChipsComponent
|
||||
}]
|
||||
}
|
||||
];
|
||||
@ -1,63 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Menus (dropdowns)</mat-card-title>
|
||||
<mat-card-subtitle>mat-menu is a list of options that displays when triggered.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>You clicked on: {{ selected }}</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="menu" aria-label="Open basic menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item *ngFor="let item of items" (click)="select(item.text)" [disabled]="item.disabled">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-card-content>
|
||||
<p> Clicking these will navigate:</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="anchorMenu" aria-label="Open anchor menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-menu #anchorMenu="matMenu">
|
||||
<a mat-menu-item *ngFor="let item of items" href="http://www.google.com" [disabled]="item.disabled">
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</mat-menu>
|
||||
|
||||
<mat-card-content>
|
||||
<p>Position x: before</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar class="end-icon">
|
||||
<button mat-icon-button [mat-menu-trigger-for]="posXMenu" aria-label="Open x-positioned menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-menu x-position="before" #posXMenu="matMenu" class="before">
|
||||
<button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
|
||||
<mat-icon>{{ item.icon }}</mat-icon>
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-card-content>
|
||||
<p>Position y: above</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="posYMenu" aria-label="Open y-positioned menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-menu y-position="above" #posYMenu="matMenu">
|
||||
<button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-card>
|
||||
@ -1,38 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
templateUrl: './menu.component.html',
|
||||
styleUrls: ['./menu.component.scss']
|
||||
})
|
||||
export class MenuComponent {
|
||||
selected = '';
|
||||
items = [{
|
||||
text: 'Refresh'
|
||||
}, {
|
||||
text: 'Settings'
|
||||
}, {
|
||||
text: 'Help',
|
||||
disabled: true
|
||||
}, {
|
||||
text: 'Sign Out'
|
||||
}];
|
||||
|
||||
iconItems = [{
|
||||
text: 'Redial',
|
||||
icon: 'dialpad'
|
||||
}, {
|
||||
text: 'Check voicemail',
|
||||
icon: 'voicemail',
|
||||
disabled: true
|
||||
}, {
|
||||
text: 'Disable alerts',
|
||||
icon: 'notifications_off'
|
||||
}];
|
||||
|
||||
select(text: string) {
|
||||
this.selected = text;
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Progress spinner</mat-card-title>
|
||||
<mat-card-subtitle>mat-progress-spinner is a component for indicating progress and activity, matching the spec of Material Design Progress & Activity.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Determinate</p>
|
||||
<div class="mb-1">
|
||||
<div fxLayout="row">
|
||||
<mat-progress-spinner mode="determinate"
|
||||
[value]="progressValue"
|
||||
class="primary"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="determinate" [value]="progressValue"
|
||||
color="accent"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="determinate" [value]="progressValue"
|
||||
color="warn"></mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button mat-raised-button class="mr-1" (click)="step(10)">Increase</button>
|
||||
<button mat-raised-button (click)="step(-10)">Decrease</button>
|
||||
|
||||
<p class="mt-1">Indeterminate</p>
|
||||
<div>
|
||||
<div fxLayout="row">
|
||||
<mat-progress-spinner mode="indeterminate"
|
||||
class="primary"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="indeterminate"
|
||||
color="accent"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="indeterminate"
|
||||
color="warn"></mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-title>Progress bar</mat-card-title>
|
||||
<mat-card-subtitle>mat-progress-bar is a component for indicating progress and activity, matching the spec of Material Design Progress & Activity</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Determinate</p>
|
||||
<mat-progress-bar mode="determinate"
|
||||
[value]="determinateProgressValue"
|
||||
color="primary"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
<button mat-raised-button class="mr-1" (click)="stepDeterminateProgressVal(10)">Increase</button>
|
||||
<button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
|
||||
|
||||
<p>Buffer</p>
|
||||
<mat-progress-bar [value]="bufferProgressValue"
|
||||
[bufferValue]="bufferBufferValue"
|
||||
mode="buffer"
|
||||
color="warn"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<button mat-raised-button class="mr-1 mb-xs" (click)="stepBufferProgressVal(10)">Increase</button>
|
||||
<button mat-raised-button class="mb-xs" (click)="stepBufferProgressVal(-10)">Decrease</button>
|
||||
<span fxFlex></span>
|
||||
<button mat-raised-button class="mr-1 mb-xs" (click)="stepBufferBufferVal(10)">Increase</button>
|
||||
<button mat-raised-button class="mb-xs" (click)="stepBufferBufferVal(-10)">Decrease</button>
|
||||
</div>
|
||||
|
||||
<p>Indeterminate</p>
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
|
||||
<p>Query</p>
|
||||
<mat-progress-bar mode="query"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
|
||||
<p>Colors</p>
|
||||
<mat-progress-bar mode="indeterminate" color="primary" class="mb-1"></mat-progress-bar>
|
||||
<mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
|
||||
<mat-progress-bar mode="indeterminate" color="warn" class="mb-1"></mat-progress-bar>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,32 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress',
|
||||
templateUrl: './progress.component.html',
|
||||
styleUrls: ['./progress.component.scss']
|
||||
})
|
||||
export class ProgressComponent {
|
||||
|
||||
progressValue = 40;
|
||||
determinateProgressValue = 30;
|
||||
bufferProgressValue = 30;
|
||||
bufferBufferValue = 40;
|
||||
|
||||
step(val: number) {
|
||||
this.progressValue += val;
|
||||
}
|
||||
|
||||
stepDeterminateProgressVal(val: number) {
|
||||
this.determinateProgressValue += val;
|
||||
}
|
||||
|
||||
stepBufferProgressVal(val: number) {
|
||||
this.bufferProgressValue += val;
|
||||
}
|
||||
|
||||
stepBufferBufferVal(val: number) {
|
||||
this.bufferBufferValue += val;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Radios</mat-card-title>
|
||||
<mat-card-subtitle>Radio buttons allow the user to select one option from a set</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="33" fxFlex="100">
|
||||
<p>Basic Example</p>
|
||||
<div fxLayout="column">
|
||||
<mat-radio-button name="group1">Option 1</mat-radio-button>
|
||||
<mat-radio-button name="group1">Option 2</mat-radio-button>
|
||||
<mat-radio-button name="group1" disabled="true">Option 3 (disabled)</mat-radio-button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33" fxFlex="100">
|
||||
<p>Dynamic Example</p>
|
||||
<div>
|
||||
<mat-radio-group name="my_options" [disabled]="isDisabled" fxLayout="column">
|
||||
<mat-radio-button value="option_1">Option 1</mat-radio-button>
|
||||
<mat-radio-button value="option_2">Option 2</mat-radio-button>
|
||||
<mat-radio-button value="option_3">Option 3</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<p>
|
||||
<span>isDisabled: {{isDisabled}}</span>
|
||||
<button (click)="isDisabled=!isDisabled" class="demo-button">
|
||||
Disable buttons
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<span><mat-checkbox [(ngModel)]="isAlignEnd">Align end</mat-checkbox></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33" fxFlex="100">
|
||||
<p>Dynamic Example with two-way data-binding</p>
|
||||
<div>
|
||||
<mat-radio-group name="more_options" [(ngModel)]="favoriteSeason" fxLayout="column">
|
||||
<mat-radio-button *ngFor="let season of seasonOptions" name="more_options" [value]="season">
|
||||
{{season}}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<p>Your favorite season is: {{favoriteSeason}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,16 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-radio',
|
||||
templateUrl: './radio.component.html',
|
||||
styleUrls: ['./radio.component.scss']
|
||||
})
|
||||
export class RadioComponent {
|
||||
|
||||
isDisabled = false;
|
||||
isAlignEnd = false;
|
||||
favoriteSeason = 'Autumn';
|
||||
seasonOptions: string[] = ['Winter', 'Spring', 'Summer', 'Autumn', ];
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Select</mat-card-title>
|
||||
<mat-card-subtitle>Select buttons allow the user to select one option from a set</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
|
||||
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
|
||||
{{ drink.viewValue }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<p> Value: {{ currentDrink }} </p>
|
||||
<p> Touched: {{ drinkControl.touched }} </p>
|
||||
<p> Dirty: {{ drinkControl.dirty }} </p>
|
||||
<p> Status: {{ drinkControl.control?.status }} </p>
|
||||
<button mat-button (click)="currentDrink='sprite-1'">SET VALUE</button>
|
||||
<button mat-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
|
||||
<button mat-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
|
||||
<button mat-button (click)="drinkControl.reset()">RESET</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,42 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-select',
|
||||
templateUrl: './select.component.html',
|
||||
styleUrls: ['./select.component.scss']
|
||||
})
|
||||
export class SelectComponent {
|
||||
isRequired = false;
|
||||
isDisabled = false;
|
||||
currentDrink: string;
|
||||
|
||||
drinks = [{
|
||||
value: 'coke-0',
|
||||
viewValue: 'Coke'
|
||||
}, {
|
||||
value: 'sprite-1',
|
||||
viewValue: 'Sprite'
|
||||
}, {
|
||||
value: 'water-2',
|
||||
viewValue: 'Water'
|
||||
}, {
|
||||
value: 'pepper-3',
|
||||
viewValue: 'Dr. Pepper'
|
||||
}, {
|
||||
value: 'coffee-4',
|
||||
viewValue: 'Coffee'
|
||||
}, {
|
||||
value: 'tea-5',
|
||||
viewValue: 'Tea'
|
||||
}, {
|
||||
value: 'juice-6',
|
||||
viewValue: 'Orange juice'
|
||||
}, {
|
||||
value: 'wine-7',
|
||||
viewValue: 'Wine'
|
||||
}, {
|
||||
value: 'milk-8',
|
||||
viewValue: 'Milk'
|
||||
}];
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Slider</mat-card-title>
|
||||
<mat-card-subtitle>mat-slider is a component that allows users to select from a range of values by moving the slider thumb</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Default Slider</p>
|
||||
Label <mat-slider #slidey></mat-slider>
|
||||
{{slidey.value}}
|
||||
|
||||
<p>Slider with Min and Max</p>
|
||||
<input [(ngModel)]="min">
|
||||
<mat-slider [min]="min" [max]="max" tick-interval="5" #slider2></mat-slider>
|
||||
{{slider2.value}}
|
||||
<input [(ngModel)]="max">
|
||||
|
||||
<p>Disabled Slider</p>
|
||||
<mat-slider disabled #slider3></mat-slider>
|
||||
{{slider3.value}}
|
||||
|
||||
<p>Slider with set value</p>
|
||||
<mat-slider value="43"></mat-slider>
|
||||
|
||||
<p>Slider with step defined</p>
|
||||
<mat-slider min="1" max="100" step="20" #slider5></mat-slider>
|
||||
{{slider5.value}}
|
||||
|
||||
<p>Slider with set tick interval</p>
|
||||
<mat-slider tick-interval="auto"></mat-slider>
|
||||
<mat-slider tick-interval="9"></mat-slider>
|
||||
|
||||
<p>Slider with Thumb Label</p>
|
||||
<mat-slider thumb-label></mat-slider>
|
||||
|
||||
<p>Slider with one-way binding</p>
|
||||
<mat-slider [value]="val" step="40"></mat-slider>
|
||||
<input [(ngModel)]="val">
|
||||
|
||||
<p>Slider with two-way binding</p>
|
||||
<mat-slider [(ngModel)]="demo" step="40"></mat-slider>
|
||||
<input [(ngModel)]="demo">
|
||||
|
||||
<p>Inverted slider</p>
|
||||
<mat-slider invert value="50" tick-interval="5"></mat-slider>
|
||||
|
||||
<p>Vertical slider</p>
|
||||
<mat-slider vertical thumb-label tick-interval="auto" value="50"></mat-slider>
|
||||
|
||||
<p>Inverted vertical slider</p>
|
||||
<mat-slider vertical invert thumb-label tick-interval="auto" value="50"></mat-slider>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,16 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-slider',
|
||||
templateUrl: './slider.component.html',
|
||||
styleUrls: ['./slider.component.scss']
|
||||
})
|
||||
export class SliderComponent {
|
||||
|
||||
demo: number;
|
||||
val = 50;
|
||||
min = 0;
|
||||
max = 100;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Snack Bar</mat-card-title>
|
||||
<mat-card-subtitle>matSnackBar is a service, which opens snack bar notifications in the view.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Message: <mat-form-field><input matInput type="text" [(ngModel)]="message"></mat-form-field></p>
|
||||
<mat-checkbox [(ngModel)]="action">
|
||||
<p *ngIf="!action">Show button on snack bar</p>
|
||||
<mat-form-field *ngIf="action">
|
||||
<input matInput
|
||||
type="text"
|
||||
class="demo-button-label-input"
|
||||
placeholder="Snack bar action label"
|
||||
[(ngModel)]="actionButtonLabel">
|
||||
</mat-form-field>
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-checkbox [(ngModel)]="setAutoHide">
|
||||
<p *ngIf="!setAutoHide">Auto hide after duration</p>
|
||||
<mat-form-field *ngIf="setAutoHide">
|
||||
<input matInput
|
||||
type="number"
|
||||
class="demo-button-label-input"
|
||||
placeholder="Auto Hide Duration in ms"
|
||||
[(ngModel)]="autoHide">
|
||||
</mat-form-field>
|
||||
</mat-checkbox>
|
||||
<p><mat-checkbox [(ngModel)]="addExtraClass">Add extra class to container</mat-checkbox></p>
|
||||
<button mat-raised-button (click)="open()">Show Snack bar</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,25 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-snackbar',
|
||||
templateUrl: './snackbar.component.html',
|
||||
styleUrls: ['./snackbar.component.scss']
|
||||
})
|
||||
export class SnackbarComponent {
|
||||
message = 'Snack Bar opened.';
|
||||
actionButtonLabel = 'Retry';
|
||||
action = false;
|
||||
setAutoHide = true;
|
||||
autoHide = 10000;
|
||||
addExtraClass = false;
|
||||
|
||||
constructor(public snackBar: MatSnackBar) {}
|
||||
|
||||
open() {
|
||||
const config = new MatSnackBarConfig();
|
||||
config.duration = this.autoHide;
|
||||
config.panelClass = this.addExtraClass ? ['party'] : null;
|
||||
this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
|
||||
}
|
||||
}
|
||||
@ -1,138 +0,0 @@
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tab Group Demo - Dynamic Tabs</mat-card-title>
|
||||
<div class="mat-blue-grey">
|
||||
<mat-card-title>Add New Tab</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-checkbox [(ngModel)]="createWithLongContent">
|
||||
Include extra content
|
||||
</mat-checkbox>
|
||||
<mat-checkbox [(ngModel)]="gotoNewTabAfterAdding">
|
||||
Select after adding
|
||||
</mat-checkbox>
|
||||
<div>
|
||||
Position:
|
||||
<mat-form-field>
|
||||
<input matInput type="number" [(ngModel)]="addTabPosition">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button mat-raised-button color="primary"
|
||||
(click)="addTab(createWithLongContent)">
|
||||
Add Tab
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<mat-card-content>
|
||||
<mat-form-field>
|
||||
<input matInput type="number" placeholder="Selected tab index" [(ngModel)]="activeTabIndex">
|
||||
</mat-form-field>
|
||||
<mat-card>
|
||||
<mat-tab-group mat-dynamic-height [(selectedIndex)]="activeTabIndex">
|
||||
<mat-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-1">{{tab.content}}</p>
|
||||
<div *ngIf="tab.extraContent" class="mb-1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
</div>
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
<button mat-raised-button color="primary" [disabled]="dynamicTabs.length == 1" (click)="deleteTab(tab)">Delete Tab</button>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tab Group Demo - Dynamic Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group mat-dynamic-height>
|
||||
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-1">{{tab.content}}</p>
|
||||
<div *ngIf="tab.extraContent" class="mb-1">
|
||||
Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tab Group Demo - Dynamic Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group style="height: 200px">
|
||||
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-1">{{tab.content}}</p>
|
||||
<div *ngIf="tab.extraContent" class="mb-1">
|
||||
Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Stretched Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group style="height: 200px" mat-stretch-tabs>
|
||||
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>{{tab.content}}</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Async Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group>
|
||||
<mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-2">{{tab.content}}</p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tabs with simplified api</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Earth</ng-template>
|
||||
<mat-card-content>This tab is about the Earth!</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Fire</ng-template>
|
||||
<mat-card-content>This tab is about combustion!</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,90 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tabs',
|
||||
templateUrl: './tabs.component.html',
|
||||
styleUrls: ['./tabs.component.scss']
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
// Nav bar demo
|
||||
tabLinks = [{
|
||||
label: 'Sun',
|
||||
link: 'sunny-tab'
|
||||
}, {
|
||||
label: 'Rain',
|
||||
link: 'rainy-tab'
|
||||
}, {
|
||||
label: 'Fog',
|
||||
link: 'foggy-tab'
|
||||
}];
|
||||
activeLinkIndex = 0;
|
||||
|
||||
// Standard tabs demo
|
||||
tabs = [{
|
||||
label: 'Tab 1',
|
||||
content: 'This is the body of the first tab'
|
||||
}, {
|
||||
label: 'Tab 2',
|
||||
disabled: true,
|
||||
content: 'This is the body of the second tab'
|
||||
}, {
|
||||
label: 'Tab 3',
|
||||
extraContent: true,
|
||||
content: 'This is the body of the third tab'
|
||||
}, {
|
||||
label: 'Tab 4',
|
||||
content: 'This is the body of the fourth tab'
|
||||
}];
|
||||
|
||||
// Dynamic tabs demo
|
||||
activeTabIndex = 0;
|
||||
addTabPosition = 0;
|
||||
gotoNewTabAfterAdding = false;
|
||||
createWithLongContent = false;
|
||||
dynamicTabs = [{
|
||||
label: 'Tab 1',
|
||||
content: 'This is the body of the first tab'
|
||||
}, {
|
||||
label: 'Tab 2',
|
||||
disabled: true,
|
||||
content: 'This is the body of the second tab'
|
||||
}, {
|
||||
label: 'Tab 3',
|
||||
extraContent: true,
|
||||
content: 'This is the body of the third tab'
|
||||
}, {
|
||||
label: 'Tab 4',
|
||||
content: 'This is the body of the fourth tab'
|
||||
}];
|
||||
|
||||
asyncTabs: Observable <any> ;
|
||||
constructor(private router: Router) {
|
||||
this.asyncTabs = Observable.create((observer: any) => {
|
||||
setTimeout(() => {
|
||||
observer.next(this.tabs);
|
||||
}, 1000);
|
||||
});
|
||||
// Initialize the index by checking if a tab link is contained in the url.
|
||||
// This is not an ideal check and can be removed if routerLink exposes if it is active.
|
||||
// https://github.com/angular/angular/pull/12525
|
||||
this.activeLinkIndex = this.tabLinks.indexOf(this.tabLinks.find(tab => router.url.indexOf(tab.link) !== -1));
|
||||
}
|
||||
|
||||
addTab(includeExtraContent: boolean): void {
|
||||
this.dynamicTabs.splice(this.addTabPosition, 0, {
|
||||
label: 'New Tab ' + (this.dynamicTabs.length + 1),
|
||||
content: 'New tab contents ' + (this.dynamicTabs.length + 1),
|
||||
extraContent: includeExtraContent
|
||||
});
|
||||
if (this.gotoNewTabAfterAdding) {
|
||||
this.activeTabIndex = this.addTabPosition;
|
||||
}
|
||||
}
|
||||
|
||||
deleteTab(tab: any) {
|
||||
this.dynamicTabs.splice(this.dynamicTabs.indexOf(tab), 1);
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Slide Toggle</mat-card-title>
|
||||
<mat-card-subtitle>matSlideToggle is a two-state control, which can be also called switch.</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<mat-slide-toggle color="primary" [(ngModel)]="firstToggle">
|
||||
Default Slide Toggle
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle [(ngModel)]="firstToggle" disabled>
|
||||
Disabled Slide Toggle
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle [disabled]="firstToggle">
|
||||
Disable Bound
|
||||
</mat-slide-toggle>
|
||||
|
||||
<p>Example where the slide toggle is required inside of a form.</p>
|
||||
|
||||
<form #form="ngForm" (ngSubmit)="onFormSubmit()">
|
||||
<mat-slide-toggle name="slideToggle" required ngModel>
|
||||
Slide Toggle
|
||||
</mat-slide-toggle>
|
||||
<p>
|
||||
<button mat-raised-button type="submit">Submit Form</button>
|
||||
</p>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,17 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-toggle',
|
||||
templateUrl: './toggle.component.html',
|
||||
styleUrls: ['./toggle.component.scss']
|
||||
})
|
||||
export class ToggleComponent {
|
||||
|
||||
firstToggle: boolean;
|
||||
|
||||
onFormSubmit() {
|
||||
alert(`You submitted the form.`);
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Toolbar</mat-card-title>
|
||||
<mat-card-subtitle>matToolbar is a vertical aligned bar, which can hold the application title or actions.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>The default color toolbar:</p>
|
||||
<mat-toolbar>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Default Toolbar</span>
|
||||
<span fxFlex></span>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<p>The primary color toolbar:</p>
|
||||
<mat-toolbar color="primary">
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Primary Toolbar</span>
|
||||
<span fxFlex></span>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<p>The accent color toolbar:</p>
|
||||
<mat-toolbar color="accent">
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Accent Toolbar</span>
|
||||
<span fxFlex></span>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<p>An accent toolbar using the second toolbar row:</p>
|
||||
<mat-toolbar color="accent">
|
||||
<mat-toolbar-row>
|
||||
<span>Second Line Toolbar</span>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
<p>A primary toolbar using the third toolbar row:</p>
|
||||
<mat-toolbar color="primary">
|
||||
<mat-toolbar-row></mat-toolbar-row>
|
||||
<mat-toolbar-row>
|
||||
<span fxFlex>Third Line Toolbar</span>
|
||||
<mat-icon>favorite</mat-icon>
|
||||
<mat-icon>delete</mat-icon>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-toolbar',
|
||||
templateUrl: './toolbar.component.html',
|
||||
styleUrls: ['./toolbar.component.scss']
|
||||
})
|
||||
export class ToolbarComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Tooltips</mat-card-title>
|
||||
<mat-card-subtitle>Tooltip allows the user to specify text to be displayed when the mouse hovers over an element.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<button #tooltip="matTooltip"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[matTooltip]="message"
|
||||
[matTooltipPosition]="position"
|
||||
[matTooltipDisabled]="disabled"
|
||||
[matTooltipShowDelay]="showDelay"
|
||||
[matTooltipHideDelay]="hideDelay"
|
||||
[matTooltipClass]="{'red-tooltip': showExtraClass}">
|
||||
Mouse over to see the tooltip
|
||||
</button>
|
||||
|
||||
<mat-radio-group [(ngModel)]="position">
|
||||
<mat-radio-button value="below">Below</mat-radio-button>
|
||||
<mat-radio-button value="above">Above</mat-radio-button>
|
||||
<mat-radio-button value="left">Left</mat-radio-button>
|
||||
<mat-radio-button value="right">Right</mat-radio-button>
|
||||
<mat-radio-button value="before">Before</mat-radio-button>
|
||||
<mat-radio-button value="after">After</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<p>
|
||||
<strong>Message: </strong>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="text" [(ngModel)]="message">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Show Delay (ms): </strong>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="number" [(ngModel)]="showDelay">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Hide Delay (ms): </strong>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="number" [(ngModel)]="hideDelay">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<strong>Mouse over to</strong>
|
||||
<button mat-raised-button color="primary" (mouseenter)="tooltip.show()">
|
||||
Show tooltip
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (mouseenter)="tooltip.hide(0)">
|
||||
Hide tooltip
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (mouseenter)="tooltip.toggle()">
|
||||
Toggle tooltip
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -1,17 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {TooltipPosition} from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tooltip',
|
||||
templateUrl: './tooltip.component.html',
|
||||
styleUrls: ['./tooltip.component.scss']
|
||||
})
|
||||
export class TooltipComponent {
|
||||
position: TooltipPosition = 'below';
|
||||
message: string = 'Here is the tooltip';
|
||||
tooltips: string[] = [];
|
||||
disabled = false;
|
||||
showDelay = 0;
|
||||
hideDelay = 1000;
|
||||
showExtraClass = false;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div class="text-center">
|
||||
<h2 class="base-border mat-text-warn mb-1">Forgot Password?</h2>
|
||||
<i class="fa fa-lock fa-4x"></i>
|
||||
<p>You can reset your password here.</p>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Email" type="text" name="name" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-blue" mat-raised-button>Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
.silk-forget-pass{
|
||||
background-color:#fff;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'ms-forgot-password',
|
||||
templateUrl:'./forgot-password-component.html',
|
||||
styleUrls: ['./forgot-password-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class ForgotPasswordComponent {
|
||||
|
||||
email: string;
|
||||
password: string;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
send() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div class="text-center">
|
||||
<h2 class="base-border mat-text-warn mb-1">Session Expired</h2>
|
||||
<img src="assets/images/test4.jpg" class="rad-full forgot-img" alt="" width="100" height="100">
|
||||
<h4><strong>Welcome back John</strong></h4>
|
||||
<p>Enter your password to continue</p>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%" class="mb-1">
|
||||
<input matInput placeholder="Password" type="password" name="password" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-blue" mat-raised-button>Submit</button>
|
||||
<p class="mat-text-warn mb-0"><a href="#">Forgot password?</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,5 +0,0 @@
|
||||
.silk-user-section{
|
||||
.lockscreen-form{
|
||||
background-color:#fff;
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'ms-lockscreen',
|
||||
templateUrl:'./lockscreen-component.html',
|
||||
styleUrls: ['./lockscreen-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class LockScreenComponent {
|
||||
|
||||
username: string;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
onSubmit() {
|
||||
this.router.navigate ( ['/'] );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div>
|
||||
<h2 class="base-border">Login Form</h2>
|
||||
<p>Enter Your Login Details</p>
|
||||
<form #form="ngForm" (ngSubmit)="login()">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="E-Mail/Mobile Num" type="text" name="email" required [(ngModel)]="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="width: 100%" class="mb-1">
|
||||
<input matInput placeholder="Password" minlength= "8" type="password" name="password" required [(ngModel)]="password">
|
||||
</mat-form-field>
|
||||
<button class="mat-green" mat-raised-button>SIGN IN</button><br/>
|
||||
<div *ngIf="email">
|
||||
<a class="mat-text-warn mb-0" (click)="forgotpassword();">Forgot password?</a></div>
|
||||
<!-- <p class="mb-0">Don't have an account? <a [routerLink]="['/register']" class="mat-text-primary">Register Here</a></p> -->
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,165 +0,0 @@
|
||||
import { Component, OnInit ,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
import { AwsService } from '../../aws.service';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { CustomValidators } from 'ng2-validation';
|
||||
|
||||
import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'ms-login-session',
|
||||
templateUrl:'./login-component.html',
|
||||
styleUrls: ['./login-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class LoginComponent {
|
||||
changepass:FormGroup;
|
||||
email: string;
|
||||
password: string;
|
||||
newpassword:any;
|
||||
confirmPassword:any;
|
||||
changePassword:any;
|
||||
status :Boolean= false;
|
||||
config: MatDialogConfig = {
|
||||
disableClose: false,
|
||||
width: '',
|
||||
height: '',
|
||||
position: {
|
||||
top: '',
|
||||
bottom: '',
|
||||
left: '',
|
||||
right: ''
|
||||
}
|
||||
};
|
||||
constructor(
|
||||
private router: Router,public aws:AwsService,public dialog: MatDialog
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
login() {
|
||||
let auth = {'Username':this.email,'Password':this.password};
|
||||
this.aws.dologin(auth).subscribe(res=>{
|
||||
console.log(res);
|
||||
if(res !== undefined){
|
||||
this.router.navigate(['/home']);
|
||||
}
|
||||
},err=>{
|
||||
console.log(err.message);
|
||||
if(err.message == "New password is required."){
|
||||
console.log("if");
|
||||
this.newpassopen();
|
||||
}else{
|
||||
console.log("else");
|
||||
|
||||
}
|
||||
//alert(err.message);
|
||||
})
|
||||
}
|
||||
|
||||
newpassopen() {
|
||||
let dialogRef = this.dialog.open(NewPasswordDialog,this.config);
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if(result !==undefined){
|
||||
let auth = {'Username':this.email,'Password':this.password,'newpassword':result};
|
||||
console.log(auth);
|
||||
this.aws.dologin(auth).subscribe(res=>{
|
||||
console.log(res);
|
||||
this.router.navigate(['/home']);
|
||||
},err=>{
|
||||
// alert(err.message);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
forgotopen() {
|
||||
this.status = true;
|
||||
}
|
||||
forgotpassword(){
|
||||
|
||||
let auth = {'Username':this.email};
|
||||
console.log(auth);
|
||||
this.aws.userforgotpass(auth).subscribe(res=>{
|
||||
console.log(res);
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
const newpassword = new FormControl('', Validators.required);
|
||||
const confirmPassword = new FormControl('', CustomValidators.equalTo(newpassword));
|
||||
@Component({
|
||||
selector: 'app-jazz-dialog',
|
||||
template: `
|
||||
<h5 class="mt-0">New Password Change.</h5>
|
||||
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="New Password" #newpassword type="password" style="width: 100%;">
|
||||
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<br/>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="ConfirmPassword" #confirmPassword type="password" style="width: 100%;">
|
||||
</mat-form-field>
|
||||
|
||||
<small *ngIf="confirmPassword.value !='' && newpassword.value != confirmPassword.value" class="mat-text-warn">Passwords do not math.</small>
|
||||
|
||||
<br>
|
||||
|
||||
<button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
|
||||
|
||||
|
||||
`
|
||||
})
|
||||
export class NewPasswordDialog{
|
||||
|
||||
newpassword:any = newpassword;
|
||||
confirmPassword:any = confirmPassword;
|
||||
jazzMessage = 'Jazzy jazz jazz';
|
||||
|
||||
constructor(public dialogRef: MatDialogRef <NewPasswordDialog>) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-jazz-dialog',
|
||||
template: `
|
||||
<h5 class="mt-0">Forgot Password</h5>
|
||||
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Email Id" #newpassword type="Email" style="width: 100%;">
|
||||
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
|
||||
|
||||
|
||||
`
|
||||
})
|
||||
export class ForgotPass{
|
||||
|
||||
newpassword:any = newpassword;
|
||||
confirmPassword:any = confirmPassword;
|
||||
jazzMessage = 'Jazzy jazz jazz';
|
||||
|
||||
constructor(public dialogRef: MatDialogRef <ForgotPass>) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div>
|
||||
<h2 class="base-border">Welcome to Sineedge Team</h2>
|
||||
<p>Do you Want Login</p>
|
||||
|
||||
<!-- <button class="mat-green" mat-raised-button (click)="SineedgeLogin()">Sineedge Login</button>
|
||||
|
||||
<hr>
|
||||
<button class="mat-green" mat-raised-button (click)="lenderLogin()">Lender Login</button> -->
|
||||
<div>
|
||||
<p>Sign in using</p> <button mat-raised-button class="shared-icon mr-1 mat-blue" (click)="sineedgeLogin()"> Sineedge Login</button><button class="shared-icon mat-red" mat-raised-button (click)="lenderLogin()">Lender Login</button></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user