2022-12-24
This commit is contained in:
parent
6518ddf75d
commit
71f39486f4
Binary file not shown.
|
@ -0,0 +1,5 @@
|
||||||
|
[{000214A0-0000-0000-C000-000000000046}]
|
||||||
|
Prop3=19,11
|
||||||
|
[InternetShortcut]
|
||||||
|
URL=https://bootstraptema.ru/
|
||||||
|
IDList=
|
|
@ -0,0 +1,27 @@
|
||||||
|
# Angular
|
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.2.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||||
|
|
||||||
|
## Further help
|
||||||
|
|
||||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { AppPage } from './app.po';
|
||||||
|
|
||||||
|
describe('angular App', () => {
|
||||||
|
let page: AppPage;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new AppPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display welcome message', () => {
|
||||||
|
page.navigateTo();
|
||||||
|
expect(page.getParagraphText()).toEqual('Welcome to app!');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { browser, by, element } from 'protractor';
|
||||||
|
|
||||||
|
export class AppPage {
|
||||||
|
navigateTo() {
|
||||||
|
return browser.get('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
getParagraphText() {
|
||||||
|
return element(by.css('app-root h1')).getText();
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/e2e",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"jasminewd2",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
// Karma configuration file, see link for more information
|
||||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
config.set({
|
||||||
|
basePath: '',
|
||||||
|
frameworks: ['jasmine', '@angular/cli'],
|
||||||
|
plugins: [
|
||||||
|
require('karma-jasmine'),
|
||||||
|
require('karma-chrome-launcher'),
|
||||||
|
require('karma-jasmine-html-reporter'),
|
||||||
|
require('karma-coverage-istanbul-reporter'),
|
||||||
|
require('@angular/cli/plugins/karma')
|
||||||
|
],
|
||||||
|
client:{
|
||||||
|
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
coverageIstanbulReporter: {
|
||||||
|
reports: [ 'html', 'lcovonly' ],
|
||||||
|
fixWebpackSourcePaths: true
|
||||||
|
},
|
||||||
|
angularCli: {
|
||||||
|
environment: 'dev'
|
||||||
|
},
|
||||||
|
reporters: ['progress', 'kjhtml'],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: true,
|
||||||
|
browsers: ['Chrome'],
|
||||||
|
singleRun: false
|
||||||
|
});
|
||||||
|
};
|
10851
api/admin/AdminCAST/AdminCAST/admincast-master/angular/package-lock.json
generated
Normal file
10851
api/admin/AdminCAST/AdminCAST/admincast-master/angular/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,76 @@
|
||||||
|
{
|
||||||
|
"name": "my-app",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build --prod",
|
||||||
|
"test": "ng test",
|
||||||
|
"lint": "ng lint",
|
||||||
|
"e2e": "ng e2e"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "^5.0.0",
|
||||||
|
"@angular/common": "^5.0.0",
|
||||||
|
"@angular/compiler": "^5.0.0",
|
||||||
|
"@angular/core": "^5.0.0",
|
||||||
|
"@angular/forms": "^5.0.0",
|
||||||
|
"@angular/http": "^5.0.0",
|
||||||
|
"@angular/platform-browser": "^5.0.0",
|
||||||
|
"@angular/platform-browser-dynamic": "^5.0.0",
|
||||||
|
"@angular/router": "^5.0.0",
|
||||||
|
"animate.css": "^3.5.2",
|
||||||
|
"bootstrap": "4.0.0-beta",
|
||||||
|
"bootstrap-datepicker": "^1.7.1",
|
||||||
|
"bootstrap-markdown": "^2.10.0",
|
||||||
|
"cd-themify-icons": "0.0.1",
|
||||||
|
"chart.js": "^2.7.1",
|
||||||
|
"core-js": "^2.4.1",
|
||||||
|
"datatables.net-bs4": "^1.10.16",
|
||||||
|
"datatables.net-buttons-bs4": "^1.5.1",
|
||||||
|
"datatables.net-fixedheader-bs4": "^3.1.3",
|
||||||
|
"datatables.net-responsive-bs4": "^2.2.1",
|
||||||
|
"jszip": "^3.1.5",
|
||||||
|
"font-awesome": "^4.7.0",
|
||||||
|
"fullcalendar": "^3.8.0",
|
||||||
|
"jquery": "^3.2.1",
|
||||||
|
"jquery-minicolors": "^2.1.10",
|
||||||
|
"jquery-slimscroll": "^1.3.8",
|
||||||
|
"jquery-sparkline": "^2.4.0",
|
||||||
|
"jquery-validation": "^1.17.0",
|
||||||
|
"jvectormap": "^2.0.4",
|
||||||
|
"metismenu": "2.7.1",
|
||||||
|
"moment": "^2.20.1",
|
||||||
|
"morris.js": "^0.5.0",
|
||||||
|
"popper.js": "^1.12.9",
|
||||||
|
"raphael": "^2.2.7",
|
||||||
|
"rxjs": "^5.5.2",
|
||||||
|
"select2": "^4.0.6-rc.1",
|
||||||
|
"summernote": "^0.8.8",
|
||||||
|
"toastr": "^2.1.4",
|
||||||
|
"zone.js": "^0.8.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular/cli": "1.6.2",
|
||||||
|
"@angular/compiler-cli": "^5.0.0",
|
||||||
|
"@angular/language-service": "^5.0.0",
|
||||||
|
"@types/jasmine": "~2.5.53",
|
||||||
|
"@types/jasminewd2": "~2.0.2",
|
||||||
|
"@types/node": "~6.0.60",
|
||||||
|
"codelyzer": "^4.0.1",
|
||||||
|
"jasmine-core": "~2.6.2",
|
||||||
|
"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.2.1",
|
||||||
|
"karma-jasmine": "~1.1.0",
|
||||||
|
"karma-jasmine-html-reporter": "^0.2.2",
|
||||||
|
"protractor": "~5.1.2",
|
||||||
|
"ts-node": "~3.2.0",
|
||||||
|
"tslint": "~5.7.0",
|
||||||
|
"typescript": "~2.4.2"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,28 @@
|
||||||
|
// 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() {}
|
||||||
|
},
|
||||||
|
onPrepare() {
|
||||||
|
require('ts-node').register({
|
||||||
|
project: 'e2e/tsconfig.e2e.json'
|
||||||
|
});
|
||||||
|
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { TestBed, inject } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ScriptLoaderService } from './script-loader.service';
|
||||||
|
|
||||||
|
describe('ScriptLoaderService', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
providers: [ScriptLoaderService]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', inject([ScriptLoaderService], (service: ScriptLoaderService) => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
}));
|
||||||
|
});
|
|
@ -0,0 +1,41 @@
|
||||||
|
import {Injectable} from "@angular/core";
|
||||||
|
import * as $ from 'jquery';
|
||||||
|
|
||||||
|
declare let document: any;
|
||||||
|
|
||||||
|
interface Script {
|
||||||
|
src: string;
|
||||||
|
loaded: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ScriptLoaderService {
|
||||||
|
private _scripts: Script[] = [];
|
||||||
|
|
||||||
|
load(...scripts: string[]) {
|
||||||
|
scripts.forEach((script: string) => this._scripts[script] = {src: script, loaded: false});
|
||||||
|
|
||||||
|
let promises: any[] = [];
|
||||||
|
scripts.forEach((script) => promises.push(this.loadScript(script)));
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadScript(src: string) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
//resolve if already loaded
|
||||||
|
if (this._scripts[src].loaded) {
|
||||||
|
resolve({script: src, loaded: true, status: 'Already Loaded'});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//load script
|
||||||
|
let script = $('<script/>')
|
||||||
|
.attr('type', 'text/javascript')
|
||||||
|
.attr('src', this._scripts[src].src);
|
||||||
|
|
||||||
|
$('head').append(script);
|
||||||
|
resolve({script: src, loaded: true, status: 'Loaded'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,244 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
|
||||||
|
import { LayoutComponent } from './/layouts/layout.component';
|
||||||
|
|
||||||
|
import { HomeComponent } from './pages/home/home.component';
|
||||||
|
|
||||||
|
import { ColorsComponent } from './pages/ui/colors/colors.component';
|
||||||
|
import { TypographyComponent } from './pages/ui/typography/typography.component';
|
||||||
|
import { PanelsComponent } from './pages/ui/panels/panels.component';
|
||||||
|
import { TabsComponent } from './pages/ui/tabs/tabs.component';
|
||||||
|
import { AlertsComponent } from './pages/ui/alerts/alerts.component';
|
||||||
|
import { CardsComponent } from './pages/ui/cards/cards.component';
|
||||||
|
import { BadgesProgressComponent } from './pages/ui/badges-progress/badges-progress.component';
|
||||||
|
import { ListComponent } from './pages/ui/list/list.component';
|
||||||
|
import { IconsComponent } from './pages/ui/icons/icons.component';
|
||||||
|
import { ButtonsComponent } from './pages/ui/buttons/buttons.component';
|
||||||
|
|
||||||
|
import { FormBasicComponent } from './pages/forms/form-basic/form-basic.component';
|
||||||
|
import { InputMasksComponent } from './pages/forms/input-masks/input-masks.component';
|
||||||
|
import { FormValidationComponent } from './pages/forms/form-validation/form-validation.component';
|
||||||
|
import { TextEditorsComponent } from './pages/forms/text-editors/text-editors.component';
|
||||||
|
import { FormAdvancedComponent } from './pages/forms/form-advanced/form-advanced.component';
|
||||||
|
|
||||||
|
import { TablesComponent } from './pages/tables/tables.component';
|
||||||
|
import { DatatablesComponent } from './pages/datatables/datatables.component';
|
||||||
|
|
||||||
|
import { ChartjsComponent } from './pages/charts/chartjs/chartjs.component';
|
||||||
|
import { MorrisChartComponent } from './pages/charts/morris-chart/morris-chart.component';
|
||||||
|
import { SparklineChartComponent } from './pages/charts/sparkline-chart/sparkline-chart.component';
|
||||||
|
|
||||||
|
import { MapsVectorComponent } from './pages/maps-vector/maps-vector.component';
|
||||||
|
|
||||||
|
import { MailboxComponent } from './pages/mailbox/mailbox/mailbox.component';
|
||||||
|
import { MailComposeComponent } from './pages/mailbox/mail-compose/mail-compose.component';
|
||||||
|
import { MailViewComponent } from './pages/mailbox/mail-view/mail-view.component';
|
||||||
|
|
||||||
|
import { CalendarComponent } from './pages/calendar/calendar.component';
|
||||||
|
|
||||||
|
import { ProfileComponent } from './pages/profile/profile.component';
|
||||||
|
import { InvoiceComponent } from './pages/invoice/invoice.component';
|
||||||
|
import { LoginComponent } from './pages/login/login.component';
|
||||||
|
import { RegisterComponent } from './pages/register/register.component';
|
||||||
|
import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
|
||||||
|
import { LockscreenComponent } from './pages/lockscreen/lockscreen.component';
|
||||||
|
import { Error404Component } from './pages/error-404/error-404.component';
|
||||||
|
import { Error500Component } from './pages/error-500/error-500.component';
|
||||||
|
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{path: '', redirectTo: 'index', pathMatch: 'full'},
|
||||||
|
{
|
||||||
|
"path": "",
|
||||||
|
"component": LayoutComponent,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
path: "index",
|
||||||
|
component: HomeComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/colors",
|
||||||
|
component: ColorsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/typography",
|
||||||
|
component: TypographyComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/panels",
|
||||||
|
component: PanelsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/buttons",
|
||||||
|
component: ButtonsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/tabs",
|
||||||
|
component: TabsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/alerts",
|
||||||
|
component: AlertsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/badges_progress",
|
||||||
|
component: BadgesProgressComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/lists",
|
||||||
|
component: ListComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/cards",
|
||||||
|
component: CardsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "ui/icons",
|
||||||
|
component: IconsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "forms/form_basic",
|
||||||
|
component: FormBasicComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "forms/form_advanced",
|
||||||
|
component: FormAdvancedComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "forms/form_masks",
|
||||||
|
component: InputMasksComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "forms/form_validation",
|
||||||
|
component: FormValidationComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "forms/text_editors",
|
||||||
|
component: TextEditorsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "tables/basic",
|
||||||
|
component: TablesComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "tables/datatables",
|
||||||
|
component: DatatablesComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "charts/chartjs",
|
||||||
|
component: ChartjsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "charts/charts_morris",
|
||||||
|
component: MorrisChartComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "charts/charts_sparkline",
|
||||||
|
component: SparklineChartComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "maps_vector",
|
||||||
|
component: MapsVectorComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "mailbox/mailbox",
|
||||||
|
component: MailboxComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "mailbox/mail_view",
|
||||||
|
component: MailViewComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "mailbox/mail_compose",
|
||||||
|
component: MailComposeComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "calendar",
|
||||||
|
component: CalendarComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "invoice",
|
||||||
|
"component": InvoiceComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "profile",
|
||||||
|
component: ProfileComponent
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "login",
|
||||||
|
"component": LoginComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "register",
|
||||||
|
"component": RegisterComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "lockscreen",
|
||||||
|
"component": LockscreenComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "forgot_password",
|
||||||
|
"component": ForgotPasswordComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "error_404",
|
||||||
|
"component": Error404Component
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "error_500",
|
||||||
|
"component": Error500Component
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "**",
|
||||||
|
"redirectTo": "error_404",
|
||||||
|
"pathMatch": "full"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
HomeComponent,
|
||||||
|
ColorsComponent,
|
||||||
|
TypographyComponent,
|
||||||
|
PanelsComponent,
|
||||||
|
TabsComponent,
|
||||||
|
AlertsComponent,
|
||||||
|
CardsComponent,
|
||||||
|
BadgesProgressComponent,
|
||||||
|
ListComponent,
|
||||||
|
IconsComponent,
|
||||||
|
ButtonsComponent,
|
||||||
|
FormBasicComponent,
|
||||||
|
InputMasksComponent,
|
||||||
|
FormValidationComponent,
|
||||||
|
TextEditorsComponent,
|
||||||
|
FormAdvancedComponent,
|
||||||
|
TablesComponent,
|
||||||
|
DatatablesComponent,
|
||||||
|
ChartjsComponent,
|
||||||
|
MorrisChartComponent,
|
||||||
|
SparklineChartComponent,
|
||||||
|
MapsVectorComponent,
|
||||||
|
MailboxComponent,
|
||||||
|
MailComposeComponent,
|
||||||
|
MailViewComponent,
|
||||||
|
CalendarComponent,
|
||||||
|
ProfileComponent,
|
||||||
|
InvoiceComponent,
|
||||||
|
LoginComponent,
|
||||||
|
RegisterComponent,
|
||||||
|
LockscreenComponent,
|
||||||
|
ForgotPasswordComponent,
|
||||||
|
Error404Component,
|
||||||
|
Error500Component,
|
||||||
|
],
|
||||||
|
imports: [ RouterModule.forRoot(routes) ],
|
||||||
|
exports: [
|
||||||
|
RouterModule,
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AppRoutingModule { }
|
|
@ -0,0 +1,7 @@
|
||||||
|
.preloader-backdrop {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.page-preloader {
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 5px 20px #d6dee4;
|
||||||
|
}
|
|
@ -0,0 +1,144 @@
|
||||||
|
<!-- BEGIN PAGE LOADER -->
|
||||||
|
<div class="preloader-backdrop">
|
||||||
|
<div class="page-preloader">Loading</div>
|
||||||
|
</div>
|
||||||
|
<!-- END PAGE LOADER -->
|
||||||
|
|
||||||
|
<!-- BEGIN PAGE -->
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
<!-- END PAGE -->
|
||||||
|
|
||||||
|
<!-- BEGIN THEME CONFIG PANEL-->
|
||||||
|
<div class="theme-config">
|
||||||
|
<div class="theme-config-toggle"><i class="fa fa-cog theme-config-show"></i><i class="ti-close theme-config-close"></i></div>
|
||||||
|
<div class="theme-config-box">
|
||||||
|
<div class="text-center font-18 m-b-20">SETTINGS</div>
|
||||||
|
<div class="font-strong">LAYOUT OPTIONS</div>
|
||||||
|
<div class="check-list m-b-20 m-t-10">
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray">
|
||||||
|
<input id="_fixedNavbar" type="checkbox" checked>
|
||||||
|
<span class="input-span"></span>Fixed navbar</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray">
|
||||||
|
<input id="_fixedlayout" type="checkbox">
|
||||||
|
<span class="input-span"></span>Fixed layout</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray">
|
||||||
|
<input class="js-sidebar-toggler" type="checkbox">
|
||||||
|
<span class="input-span"></span>Collapse sidebar</label>
|
||||||
|
</div>
|
||||||
|
<div class="font-strong">LAYOUT STYLE</div>
|
||||||
|
<div class="m-t-10">
|
||||||
|
<label class="ui-radio ui-radio-gray m-r-10">
|
||||||
|
<input type="radio" name="layout-style" value="" checked="">
|
||||||
|
<span class="input-span"></span>Fluid</label>
|
||||||
|
<label class="ui-radio ui-radio-gray">
|
||||||
|
<input type="radio" name="layout-style" value="1">
|
||||||
|
<span class="input-span"></span>Boxed</label>
|
||||||
|
</div>
|
||||||
|
<div class="m-t-10 m-b-10 font-strong">THEME COLORS</div>
|
||||||
|
<div class="d-flex m-b-20">
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Default">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="default" checked="">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-white"></div>
|
||||||
|
<div class="color-small bg-ebony"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Blue">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="blue">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-blue"></div>
|
||||||
|
<div class="color-small bg-ebony"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Green">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="green">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-green"></div>
|
||||||
|
<div class="color-small bg-ebony"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Purple">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="purple">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-purple"></div>
|
||||||
|
<div class="color-small bg-ebony"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Orange">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="orange">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-orange"></div>
|
||||||
|
<div class="color-small bg-ebony"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Pink">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="pink">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-pink"></div>
|
||||||
|
<div class="color-small bg-ebony"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="White">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="white">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color"></div>
|
||||||
|
<div class="color-small bg-silver-100"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Blue light">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="blue-light">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-blue"></div>
|
||||||
|
<div class="color-small bg-silver-100"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Green light">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="green-light">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-green"></div>
|
||||||
|
<div class="color-small bg-silver-100"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Purple light">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="purple-light">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-purple"></div>
|
||||||
|
<div class="color-small bg-silver-100"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Orange light">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="orange-light">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-orange"></div>
|
||||||
|
<div class="color-small bg-silver-100"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="color-skin-box" data-toggle="tooltip" data-original-title="Pink light">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="setting-theme" value="pink-light">
|
||||||
|
<span class="color-check-icon"><i class="fa fa-check"></i></span>
|
||||||
|
<div class="color bg-pink"></div>
|
||||||
|
<div class="color-small bg-silver-100"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END THEME CONFIG PANEL-->
|
||||||
|
|
||||||
|
<!-- SCROLL TOP -->
|
||||||
|
<div class="to-top"><i class="fa fa-angle-double-up"></i></div>
|
||||||
|
<!-- END SCROLL TOP -->
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { TestBed, async } from '@angular/core/testing';
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
describe('AppComponent', () => {
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent
|
||||||
|
],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
it('should create the app', async(() => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.debugElement.componentInstance;
|
||||||
|
expect(app).toBeTruthy();
|
||||||
|
}));
|
||||||
|
it(`should have as title 'app'`, async(() => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.debugElement.componentInstance;
|
||||||
|
expect(app.title).toEqual('app');
|
||||||
|
}));
|
||||||
|
it('should render title in a h1 tag', async(() => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.debugElement.nativeElement;
|
||||||
|
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
|
||||||
|
}));
|
||||||
|
});
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import {Router, NavigationStart, NavigationEnd} from '@angular/router';
|
||||||
|
import {Helpers} from "./helpers";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'body',
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AppComponent implements OnInit, AfterViewInit {
|
||||||
|
title = 'app';
|
||||||
|
constructor(private _router: Router) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
|
||||||
|
this._router.events.subscribe((route) => {
|
||||||
|
if (route instanceof NavigationStart) {
|
||||||
|
Helpers.setLoading(true);
|
||||||
|
Helpers.bodyClass('fixed-navbar');
|
||||||
|
}
|
||||||
|
if (route instanceof NavigationEnd) {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
Helpers.setLoading(false);
|
||||||
|
|
||||||
|
// Initialize page: handlers ...
|
||||||
|
Helpers.initPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
|
import { AppComponent } from './/app.component';
|
||||||
|
import { AppRoutingModule } from './/app-routing.module';
|
||||||
|
import { LayoutModule } from './/layouts/layout.module';
|
||||||
|
import { ScriptLoaderService } from './_services/script-loader.service';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
LayoutModule,
|
||||||
|
],
|
||||||
|
providers: [ScriptLoaderService],
|
||||||
|
bootstrap: [AppComponent]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
|
@ -0,0 +1,82 @@
|
||||||
|
import * as $ from "jquery";
|
||||||
|
|
||||||
|
declare var jQuery:any;
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
export class Helpers {
|
||||||
|
static setLoading(loading) {
|
||||||
|
let body = $('body');
|
||||||
|
if (loading) {
|
||||||
|
$('.preloader-backdrop').fadeIn(200);
|
||||||
|
} else {
|
||||||
|
$('.preloader-backdrop').fadeOut(200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static bodyClass(Class) {
|
||||||
|
$('body').attr('class', Class);
|
||||||
|
}
|
||||||
|
|
||||||
|
static initLayout() {
|
||||||
|
// SIDEBAR ACTIVATE METISMENU
|
||||||
|
$(".metismenu").metisMenu();
|
||||||
|
|
||||||
|
// SIDEBAR TOGGLE ACTION
|
||||||
|
$('.js-sidebar-toggler').click(function() {
|
||||||
|
$('body').toggleClass('sidebar-mini');
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
static initPage() {
|
||||||
|
|
||||||
|
// Activate Tooltips
|
||||||
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
|
|
||||||
|
// Activate Popovers
|
||||||
|
$('[data-toggle="popover"]').popover();
|
||||||
|
|
||||||
|
// Activate slimscroll
|
||||||
|
$('.scroller').each(function(){
|
||||||
|
$(this).slimScroll({
|
||||||
|
height: $(this).attr('data-height'),
|
||||||
|
color: $(this).attr('data-color'),
|
||||||
|
railOpacity: '0.9',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.slimScrollBar').hide();
|
||||||
|
|
||||||
|
|
||||||
|
// PANEL ACTIONS
|
||||||
|
// ======================
|
||||||
|
|
||||||
|
$('.ibox-collapse').click(function(){
|
||||||
|
var ibox = $(this).closest('div.ibox');
|
||||||
|
ibox.toggleClass('collapsed-mode').children('.ibox-body').slideToggle(200);
|
||||||
|
});
|
||||||
|
$('.ibox-remove').click(function(){
|
||||||
|
$(this).closest('div.ibox').remove();
|
||||||
|
});
|
||||||
|
$('.fullscreen-link').click(function(){
|
||||||
|
if($('body').hasClass('fullscreen-mode')) {
|
||||||
|
$('body').removeClass('fullscreen-mode');
|
||||||
|
$(this).closest('div.ibox').removeClass('ibox-fullscreen');
|
||||||
|
$(window).off('keydown',toggleFullscreen);
|
||||||
|
} else {
|
||||||
|
$('body').addClass('fullscreen-mode');
|
||||||
|
$(this).closest('div.ibox').addClass('ibox-fullscreen');
|
||||||
|
$(window).on('keydown', toggleFullscreen);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function toggleFullscreen(e) {
|
||||||
|
// pressing the ESC key - KEY_ESC = 27
|
||||||
|
if(e.which == 27) {
|
||||||
|
$('body').removeClass('fullscreen-mode');
|
||||||
|
$('.ibox-fullscreen').removeClass('ibox-fullscreen');
|
||||||
|
$(window).off('keydown',toggleFullscreen);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,32 @@
|
||||||
|
<a class="adminca-banner" href="http://admincast.com/adminca/" target="_blank">
|
||||||
|
<div class="adminca-banner-ribbon"><i class="fa fa-trophy mr-2"></i>PREMIUM TEMPLATE</div>
|
||||||
|
<div class="wrap-1">
|
||||||
|
<div class="wrap-2">
|
||||||
|
<div>
|
||||||
|
<img src="./assets/img/adminca-banner/adminca-preview.jpg" style="height:160px;margin-top:50px;" />
|
||||||
|
</div>
|
||||||
|
<div class="color-white" style="margin-left:40px;">
|
||||||
|
<h1 class="font-bold">ADMINCA</h1>
|
||||||
|
<p class="font-16">Save your time, choose the best</p>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li class="m-b-5"><i class="ti-check m-r-5"></i>High Quality Design</li>
|
||||||
|
<li class="m-b-5"><i class="ti-check m-r-5"></i>Fully Customizable and Easy Code</li>
|
||||||
|
<li class="m-b-5"><i class="ti-check m-r-5"></i>Bootstrap 4 and Angular 5+</li>
|
||||||
|
<li class="m-b-5"><i class="ti-check m-r-5"></i>Best Build Tools: Gulp, SaSS, Pug...</li>
|
||||||
|
<li><i class="ti-check m-r-5"></i>More layouts, pages, components</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex:1;">
|
||||||
|
<div class="d-flex justify-content-end wrap-3">
|
||||||
|
<div class="adminca-banner-b m-r-20">
|
||||||
|
<img src="./assets/img/adminca-banner/bootstrap.png" style="width:40px;margin-right:10px;" />Bootstrap v4</div>
|
||||||
|
<div class="adminca-banner-b m-r-10">
|
||||||
|
<img src="./assets/img/adminca-banner/angular.png" style="width:35px;margin-right:10px;" />Angular v5+</div>
|
||||||
|
</div>
|
||||||
|
<div class="dev-img">
|
||||||
|
<img src="./assets/img/adminca-banner/sprite.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: '[app-banner]',
|
||||||
|
templateUrl: './app-banner.component.html',
|
||||||
|
})
|
||||||
|
export class AppBanner implements AfterViewInit {
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,2 @@
|
||||||
|
<div class="font-13">2018 © <b>AdminCAST</b> - All rights reserved.</div>
|
||||||
|
<a class="px-4" href="http://themeforest.net/item/adminca-responsive-bootstrap-4-3-angular-4-admin-dashboard-template/20912589" target="_blank">BUY PREMIUM</a>
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: '[app-footer]',
|
||||||
|
templateUrl: './app-footer.component.html'
|
||||||
|
})
|
||||||
|
export class AppFooter {}
|
|
@ -0,0 +1,153 @@
|
||||||
|
<div class="page-brand">
|
||||||
|
<a class="link" routerLink="/index">
|
||||||
|
<span class="brand">Admin
|
||||||
|
<span class="brand-tip">CAST</span>
|
||||||
|
</span>
|
||||||
|
<span class="brand-mini">AC</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox flex-1">
|
||||||
|
<!-- START TOP-LEFT TOOLBAR-->
|
||||||
|
<ul class="nav navbar-toolbar">
|
||||||
|
<li>
|
||||||
|
<a class="nav-link sidebar-toggler js-sidebar-toggler"><i class="ti-menu"></i></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<form class="navbar-search" action="javascript:;">
|
||||||
|
<div class="rel">
|
||||||
|
<span class="search-icon"><i class="ti-search"></i></span>
|
||||||
|
<input class="form-control" placeholder="Search here...">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- END TOP-LEFT TOOLBAR-->
|
||||||
|
<!-- START TOP-RIGHT TOOLBAR-->
|
||||||
|
<ul class="nav navbar-toolbar">
|
||||||
|
<li class="dropdown dropdown-inbox">
|
||||||
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope-o"></i>
|
||||||
|
<span class="badge badge-primary envelope-badge">9</span>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-media">
|
||||||
|
<li class="dropdown-menu-header">
|
||||||
|
<div>
|
||||||
|
<span><strong>9 New</strong> Messages</span>
|
||||||
|
<a class="pull-right" href="mailbox.html">view all</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group list-group-divider scroller" data-height="240px" data-color="#71808f">
|
||||||
|
<div>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<img src="./assets/img/users/u1.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-strong"> </div>Jeanne Gonzalez<small class="text-muted float-right">Just now</small>
|
||||||
|
<div class="font-13">Your proposal interested me.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<img src="./assets/img/users/u2.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-strong"></div>Becky Brooks<small class="text-muted float-right">18 mins</small>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<img src="./assets/img/users/u3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-strong"></div>Frank Cruz<small class="text-muted float-right">18 mins</small>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<img src="./assets/img/users/u4.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-strong"></div>Rose Pearson<small class="text-muted float-right">3 hrs</small>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown dropdown-notification">
|
||||||
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o rel"><span class="notify-signal"></span></i></a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-media">
|
||||||
|
<li class="dropdown-menu-header">
|
||||||
|
<div>
|
||||||
|
<span><strong>5 New</strong> Notifications</span>
|
||||||
|
<a class="pull-right" href="javascript:;">view all</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group list-group-divider scroller" data-height="240px" data-color="#71808f">
|
||||||
|
<div>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<span class="badge badge-success badge-big"><i class="fa fa-check"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-13">4 task compiled</div><small class="text-muted">22 mins</small></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<span class="badge badge-default badge-big"><i class="fa fa-shopping-basket"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-13">You have 12 new orders</div><small class="text-muted">40 mins</small></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<span class="badge badge-danger badge-big"><i class="fa fa-bolt"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-13">Server #7 rebooted</div><small class="text-muted">2 hrs</small></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="list-group-item">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-img">
|
||||||
|
<span class="badge badge-success badge-big"><i class="fa fa-user"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="font-13">New user registered</div><small class="text-muted">2 hrs</small></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown dropdown-user">
|
||||||
|
<a class="nav-link dropdown-toggle link" data-toggle="dropdown">
|
||||||
|
<img src="./assets/img/admin-avatar.png" />
|
||||||
|
<span></span>Admin<i class="fa fa-angle-down m-l-5"></i></a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right">
|
||||||
|
<a class="dropdown-item" href="profile.html"><i class="fa fa-user"></i>Profile</a>
|
||||||
|
<a class="dropdown-item" href="profile.html"><i class="fa fa-cog"></i>Settings</a>
|
||||||
|
<a class="dropdown-item" href="javascript:;"><i class="fa fa-support"></i>Support</a>
|
||||||
|
<li class="dropdown-divider"></li>
|
||||||
|
<a class="dropdown-item" href="login.html"><i class="fa fa-power-off"></i>Logout</a>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- END TOP-RIGHT TOOLBAR-->
|
||||||
|
</div>
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: '[app-header]',
|
||||||
|
templateUrl: './app-header.component.html',
|
||||||
|
})
|
||||||
|
export class AppHeader implements AfterViewInit {
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,184 @@
|
||||||
|
<div id="sidebar-collapse">
|
||||||
|
<div class="admin-block d-flex">
|
||||||
|
<div>
|
||||||
|
<img src="./assets/img/admin-avatar.png" width="45px" />
|
||||||
|
</div>
|
||||||
|
<div class="admin-info">
|
||||||
|
<div class="font-strong">James Brown</div><small>Administrator</small></div>
|
||||||
|
</div>
|
||||||
|
<ul class="side-menu metismenu">
|
||||||
|
<li>
|
||||||
|
<a routerLinkActive="active" routerLink="/index"><i class="sidebar-item-icon fa fa-th-large"></i>
|
||||||
|
<span class="nav-label">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="heading">FEATURES</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-bookmark"></i>
|
||||||
|
<span class="nav-label">Basic UI</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/colors" routerLinkActive="active">Colors</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/typography" routerLinkActive="active">Typography</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/panels" routerLinkActive="active">Panels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/buttons" routerLinkActive="active">Buttons</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/tabs" routerLinkActive="active">Tabs</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/alerts" routerLinkActive="active">Alerts & Tooltips</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/badges_progress" routerLinkActive="active">Badges & Progress</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/lists" routerLinkActive="active">List</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/cards" routerLinkActive="active">Card</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-edit"></i>
|
||||||
|
<span class="nav-label">Forms</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/forms/form_basic" routerLinkActive="active">Basic Forms</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/forms/form_advanced" routerLinkActive="active">Advanced Plugins</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/forms/form_masks" routerLinkActive="active">Form input masks</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/forms/form_validation" routerLinkActive="active">Form Validation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/forms/text_editors" routerLinkActive="active">Text Editors</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-table"></i>
|
||||||
|
<span class="nav-label">Tables</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/tables/basic" routerLinkActive="active">Basic Tables</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/tables/datatables" routerLinkActive="active">Datatables</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-bar-chart"></i>
|
||||||
|
<span class="nav-label">Charts</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/charts/charts_morris" routerLinkActive="active">Morris Charts</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/charts/chartjs" routerLinkActive="active">Chart.js</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/charts/charts_sparkline" routerLinkActive="active">Sparkline Charts</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-map"></i>
|
||||||
|
<span class="nav-label">Maps</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/maps_vector" routerLinkActive="active">Vector maps</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/ui/icons" routerLinkActive="active"><i class="sidebar-item-icon fa fa-smile-o"></i>
|
||||||
|
<span class="nav-label">Icons</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="heading">PAGES</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-envelope"></i>
|
||||||
|
<span class="nav-label">Mailbox</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/mailbox/mailbox" routerLinkActive="active">Inbox</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/mailbox/mail_view" routerLinkActive="active">Mail view</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/mailbox/mail_compose" routerLinkActive="active">Compose mail</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/calendar" routerLinkActive="active"><i class="sidebar-item-icon fa fa-calendar"></i>
|
||||||
|
<span class="nav-label">Calendar</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li routerLinkActive="active">
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-file-text"></i>
|
||||||
|
<span class="nav-label">Pages</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse" routerLinkActive="in">
|
||||||
|
<li>
|
||||||
|
<a routerLink="/invoice" routerLinkActive="active">Invoice</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/profile" routerLinkActive="active">Profile</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/login" routerLinkActive="active">Login</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/register" routerLinkActive="active">Register</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/lockscreen" routerLinkActive="active">Lockscreen</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/forgot_password" routerLinkActive="active">Forgot password</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/error_404" routerLinkActive="active">404 error</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a routerLink="/error_500" routerLinkActive="active">500 error</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;"><i class="sidebar-item-icon fa fa-sitemap"></i>
|
||||||
|
<span class="nav-label">Menu Levels</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-2-level collapse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;">Level 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;">
|
||||||
|
<span class="nav-label">Level 2</span><i class="fa fa-angle-left arrow"></i></a>
|
||||||
|
<ul class="nav-3-level collapse">
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;">Level 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="javascript:;">Level 3</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: '[app-sidebar]',
|
||||||
|
templateUrl: './app-sidebar.component.html'
|
||||||
|
})
|
||||||
|
export class AppSidebar {
|
||||||
|
ngOnInit() {}
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!-- START HEADER-->
|
||||||
|
<header class="header" app-header></header>
|
||||||
|
<!-- END HEADER-->
|
||||||
|
<!-- START SIDEBAR-->
|
||||||
|
<nav class="page-sidebar" id="sidebar" app-sidebar></nav>
|
||||||
|
<!-- END SIDEBAR-->
|
||||||
|
|
||||||
|
<!-- START PAGE CONTENT-->
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
<div app-banner></div>
|
||||||
|
<footer class="page-footer" app-footer></footer>
|
||||||
|
</div>
|
||||||
|
<!-- END PAGE CONTENT-->
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Component, AfterViewInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import {Helpers} from "../helpers";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: '.page-wrapper',
|
||||||
|
templateUrl: './layout.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
})
|
||||||
|
|
||||||
|
export class LayoutComponent implements AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
|
||||||
|
// initialize layout: handlers, menu ...
|
||||||
|
Helpers.initLayout();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {RouterModule} from '@angular/router';
|
||||||
|
|
||||||
|
import { LayoutComponent } from './/layout.component';
|
||||||
|
import { AppHeader } from './/app-header/app-header.component';
|
||||||
|
import { AppSidebar } from './/app-sidebar/app-sidebar.component';
|
||||||
|
import { AppFooter } from './/app-footer/app-footer.component';
|
||||||
|
import { AppBanner } from './/app-banner/app-banner.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
LayoutComponent,
|
||||||
|
AppHeader,
|
||||||
|
AppSidebar,
|
||||||
|
AppFooter,
|
||||||
|
AppBanner,
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
LayoutComponent,
|
||||||
|
AppHeader,
|
||||||
|
AppSidebar,
|
||||||
|
AppFooter,
|
||||||
|
AppBanner,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
RouterModule,
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class LayoutModule {
|
||||||
|
}
|
|
@ -0,0 +1,161 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Calendar</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Calendar</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div id="external-events">
|
||||||
|
<h5 class="m-b-10">Draggable Events</h5>
|
||||||
|
<div class="ex-event bg-green" data-class="bg-green">My Event 1</div>
|
||||||
|
<div class="ex-event bg-blue" data-class="bg-blue">My Event 2</div>
|
||||||
|
<div class="ex-event bg-orange" data-class="bg-orange">My Event 3</div>
|
||||||
|
<div class="ex-event bg-red" data-class="bg-red">My Event 4</div>
|
||||||
|
<div class="ex-event bg-silver" data-class="bg-silver">My Event 5</div>
|
||||||
|
<p class="m-l-10 m-t-20">
|
||||||
|
<label>
|
||||||
|
<input class="m-r-5" id="drop-remove" type="checkbox">remove after drop</label>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="calendar"></div>
|
||||||
|
<!-- New Event Dialog-->
|
||||||
|
<div class="modal fade" id="new-event-modal" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<form class="modal-content form-horizontal" action="javascript:;">
|
||||||
|
<div class="modal-header bg-silver-100">
|
||||||
|
<h4 class="modal-title">New Event</h4>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Title:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" id="new-event-title" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row" id="date_1">
|
||||||
|
<label class="col-sm-2 col-form-label">Start:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group datepicker date">
|
||||||
|
<span class="input-group-addon bg-white"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" id="new-event-start" type="text" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">End:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group datepicker date">
|
||||||
|
<span class="input-group-addon bg-white"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" id="new-event-end" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Color:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<select class="form-control" id="new-event-color">
|
||||||
|
<option value="bg-blue">Blue</option>
|
||||||
|
<option value="bg-red">Red</option>
|
||||||
|
<option value="bg-green">Green</option>
|
||||||
|
<option value="bg-orange">Orange</option>
|
||||||
|
<option value="bg-silver">Silver</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-10 ml-sm-auto">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input id="new-event-allDay" type="checkbox">
|
||||||
|
<span class="input-span"></span>All Day</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
|
||||||
|
<button class="btn btn-info" id="addEventButton" type="submit">Add event</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End New Event Dialog-->
|
||||||
|
<!-- Event Detail Dialog-->
|
||||||
|
<div class="modal fade" id="event-modal" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<form class="modal-content form-horizontal" action="javascript:;">
|
||||||
|
<div class="modal-header bg-silver-100">
|
||||||
|
<h4 class="modal-title">Edit Event</h4>
|
||||||
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Title:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" id="event-title" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row" id="date_1">
|
||||||
|
<label class="col-sm-2 col-form-label">Start:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group datepicker date">
|
||||||
|
<span class="input-group-addon bg-white"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" id="event-start" type="text" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">End:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group datepicker date">
|
||||||
|
<span class="input-group-addon bg-white"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" id="event-end" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Color:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<select class="form-control" id="event-color">
|
||||||
|
<option value="bg-blue">Blue</option>
|
||||||
|
<option value="bg-red">Red</option>
|
||||||
|
<option value="bg-green">Green</option>
|
||||||
|
<option value="bg-orange">Orange</option>
|
||||||
|
<option value="bg-silver">Silver</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-10 ml-sm-auto">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input id="event-allDay" type="checkbox">
|
||||||
|
<span class="input-span"></span>All Day</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-info" id="editEventButton" type="submit">Save</button>
|
||||||
|
<button class="btn btn-danger" id="deleteEventButton" type="button" data-dismiss="modal">Delete</button>
|
||||||
|
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Event Detail Dialog-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { CalendarComponent } from './calendar.component';
|
||||||
|
|
||||||
|
describe('CalendarComponent', () => {
|
||||||
|
let component: CalendarComponent;
|
||||||
|
let fixture: ComponentFixture<CalendarComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ CalendarComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(CalendarComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-calendar',
|
||||||
|
templateUrl: './calendar.component.html',
|
||||||
|
})
|
||||||
|
export class CalendarComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/vendors/jquery-ui/jquery-ui.min.js', './assets/js/scripts/calendar-demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,63 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Chart.js</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Chart.js</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Line Chart</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div>
|
||||||
|
<canvas id="line_chart" style="height:200px;"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Bar Chart</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div>
|
||||||
|
<canvas id="bar_chart" style="height:200px;"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Radar Chart</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div>
|
||||||
|
<canvas id="radar_chart" style="height:200px;"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Doughnut Chart</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div>
|
||||||
|
<canvas id="doughnut_chart" style="height:200px;"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ChartjsComponent } from './chartjs.component';
|
||||||
|
|
||||||
|
describe('ChartjsComponent', () => {
|
||||||
|
let component: ChartjsComponent;
|
||||||
|
let fixture: ComponentFixture<ChartjsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ ChartjsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ChartjsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-chartjs',
|
||||||
|
templateUrl: './chartjs.component.html',
|
||||||
|
})
|
||||||
|
export class ChartjsComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/chartjs_demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,67 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Morris Charts</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Morris Charts</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Area Chart example</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="morris_area_chart" style="height:280px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Line Chart example</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="morris_line_chart" style="height:280px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Bar Chart example</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="morris_bar_chart" style="height:280px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Donut Chart example</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="morris_donut_chart" style="height:280px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Line Chart example</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="morris_line_chart_2" style="height:280px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { MorrisChartComponent } from './morris-chart.component';
|
||||||
|
|
||||||
|
describe('MorrisChartComponent', () => {
|
||||||
|
let component: MorrisChartComponent;
|
||||||
|
let fixture: ComponentFixture<MorrisChartComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ MorrisChartComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(MorrisChartComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-morris-chart',
|
||||||
|
templateUrl: './morris-chart.component.html',
|
||||||
|
})
|
||||||
|
export class MorrisChartComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/charts_morris_demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,59 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Sparkline Charts</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Sparkline Charts</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Sparkline Charts</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<p>Mouse speed
|
||||||
|
<span id="mousespeed">Loading..</span>
|
||||||
|
</p>
|
||||||
|
<p>Inline
|
||||||
|
<span class="sparkline">10,8,9,3,5,8,5</span> line graphs
|
||||||
|
<span class="sparkline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
||||||
|
</p>
|
||||||
|
<p>Bar charts
|
||||||
|
<span class="sparkbar">10,8,9,3,5,8,5</span> negative values:
|
||||||
|
<span class="sparkbar">-3,1,2,0,3,-1</span> stacked:
|
||||||
|
<span class="sparkbar">0:2,2:4,4:2,4:1</span>
|
||||||
|
</p>
|
||||||
|
<p>Pie charts
|
||||||
|
<span class="sparkpie">1,1,2</span>
|
||||||
|
<span class="sparkpie">1,5</span>
|
||||||
|
<span class="sparkpie">20,50,80</span>
|
||||||
|
</p>
|
||||||
|
<p>Composite inline
|
||||||
|
<span id="compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
||||||
|
</p>
|
||||||
|
<p>Inline with normal range
|
||||||
|
<span id="normalline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
||||||
|
</p>
|
||||||
|
<p>Composite bar
|
||||||
|
<span id="compositebar">4,6,7,7,4,3,2,1,4</span>
|
||||||
|
</p>
|
||||||
|
<p>Discrete
|
||||||
|
<span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br /></p>
|
||||||
|
<p>Discrete with threshold
|
||||||
|
<span id="discrete2">4,6,7,7,4,3,2,1,4</span>
|
||||||
|
</p>
|
||||||
|
<p>Customize size and colours
|
||||||
|
<span id="linecustom">10,8,9,3,5,8,5,7</span>
|
||||||
|
</p>
|
||||||
|
<p>Tristate charts
|
||||||
|
<span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br /></p>
|
||||||
|
<p>Tristate chart using a colour map:
|
||||||
|
<span class="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
|
||||||
|
</p>
|
||||||
|
<p>Box Plot:
|
||||||
|
<span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br /></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SparklineChartComponent } from './sparkline-chart.component';
|
||||||
|
|
||||||
|
describe('SparklineChartComponent', () => {
|
||||||
|
let component: SparklineChartComponent;
|
||||||
|
let fixture: ComponentFixture<SparklineChartComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ SparklineChartComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(SparklineChartComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-sparkline-chart',
|
||||||
|
templateUrl: './sparkline-chart.component.html',
|
||||||
|
})
|
||||||
|
export class SparklineChartComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/sparkline-demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,330 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">DataTables</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">DataTables</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Data Table</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-striped table-bordered table-hover" id="example-table" cellspacing="0" width="100%">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Start date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Position</th>
|
||||||
|
<th>Office</th>
|
||||||
|
<th>Age</th>
|
||||||
|
<th>Start date</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Yuri Berry</td>
|
||||||
|
<td>Chief Marketing Officer (CMO)</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>40</td>
|
||||||
|
<td>2009/06/25</td>
|
||||||
|
<td>$675,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Caesar Vance</td>
|
||||||
|
<td>Pre-Sales Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2011/12/12</td>
|
||||||
|
<td>$106,450</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Doris Wilder</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>23</td>
|
||||||
|
<td>2010/09/20</td>
|
||||||
|
<td>$85,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Angelica Ramos</td>
|
||||||
|
<td>Chief Executive Officer (CEO)</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/10/09</td>
|
||||||
|
<td>$1,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Joyce</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>42</td>
|
||||||
|
<td>2010/12/22</td>
|
||||||
|
<td>$92,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Chang</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2010/11/14</td>
|
||||||
|
<td>$357,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Brenden Wagner</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>28</td>
|
||||||
|
<td>2011/06/07</td>
|
||||||
|
<td>$206,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Fiona Green</td>
|
||||||
|
<td>Chief Operating Officer (COO)</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>48</td>
|
||||||
|
<td>2010/03/11</td>
|
||||||
|
<td>$850,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shou Itou</td>
|
||||||
|
<td>Regional Marketing</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>20</td>
|
||||||
|
<td>2011/08/14</td>
|
||||||
|
<td>$163,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michelle House</td>
|
||||||
|
<td>Integration Specialist</td>
|
||||||
|
<td>Sidney</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2011/06/02</td>
|
||||||
|
<td>$95,400</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Suki Burks</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>53</td>
|
||||||
|
<td>2009/10/22</td>
|
||||||
|
<td>$114,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Prescott Bartlett</td>
|
||||||
|
<td>Technical Author</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/05/07</td>
|
||||||
|
<td>$145,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gavin Cortez</td>
|
||||||
|
<td>Team Leader</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>22</td>
|
||||||
|
<td>2008/10/26</td>
|
||||||
|
<td>$235,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Martena Mccray</td>
|
||||||
|
<td>Post-Sales support</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/03/09</td>
|
||||||
|
<td>$324,050</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Unity Butler</td>
|
||||||
|
<td>Marketing Designer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/12/09</td>
|
||||||
|
<td>$85,675</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Howard Hatfield</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/12/16</td>
|
||||||
|
<td>$164,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hope Fuentes</td>
|
||||||
|
<td>Secretary</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>41</td>
|
||||||
|
<td>2010/02/12</td>
|
||||||
|
<td>$109,850</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Vivian Harrell</td>
|
||||||
|
<td>Financial Controller</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>62</td>
|
||||||
|
<td>2009/02/14</td>
|
||||||
|
<td>$452,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Timothy Mooney</td>
|
||||||
|
<td>Office Manager</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2008/12/11</td>
|
||||||
|
<td>$136,200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jackson Bradshaw</td>
|
||||||
|
<td>Director</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>65</td>
|
||||||
|
<td>2008/09/26</td>
|
||||||
|
<td>$645,750</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Olivia Liang</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2011/02/03</td>
|
||||||
|
<td>$234,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Bruno Nash</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>38</td>
|
||||||
|
<td>2011/05/03</td>
|
||||||
|
<td>$163,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Sakura Yamamoto</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>Tokyo</td>
|
||||||
|
<td>37</td>
|
||||||
|
<td>2009/08/19</td>
|
||||||
|
<td>$139,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Thor Walton</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>61</td>
|
||||||
|
<td>2013/08/11</td>
|
||||||
|
<td>$98,540</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Finn Camacho</td>
|
||||||
|
<td>Support Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2009/07/07</td>
|
||||||
|
<td>$87,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Serge Baldwin</td>
|
||||||
|
<td>Data Coordinator</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>64</td>
|
||||||
|
<td>2012/04/09</td>
|
||||||
|
<td>$138,575</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zenaida Frank</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>63</td>
|
||||||
|
<td>2010/01/04</td>
|
||||||
|
<td>$125,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zorita Serrano</td>
|
||||||
|
<td>Software Engineer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>56</td>
|
||||||
|
<td>2012/06/01</td>
|
||||||
|
<td>$115,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jennifer Acosta</td>
|
||||||
|
<td>Junior Javascript Developer</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>43</td>
|
||||||
|
<td>2013/02/01</td>
|
||||||
|
<td>$75,650</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cara Stevens</td>
|
||||||
|
<td>Sales Assistant</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>46</td>
|
||||||
|
<td>2011/12/06</td>
|
||||||
|
<td>$145,600</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hermione Butler</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>47</td>
|
||||||
|
<td>2011/03/21</td>
|
||||||
|
<td>$356,250</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lael Greer</td>
|
||||||
|
<td>Systems Administrator</td>
|
||||||
|
<td>London</td>
|
||||||
|
<td>21</td>
|
||||||
|
<td>2009/02/27</td>
|
||||||
|
<td>$103,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jonas Alexander</td>
|
||||||
|
<td>Developer</td>
|
||||||
|
<td>San Francisco</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>2010/07/14</td>
|
||||||
|
<td>$86,500</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shad Decker</td>
|
||||||
|
<td>Regional Director</td>
|
||||||
|
<td>Edinburgh</td>
|
||||||
|
<td>51</td>
|
||||||
|
<td>2008/11/13</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Michael Bruce</td>
|
||||||
|
<td>Javascript Developer</td>
|
||||||
|
<td>Singapore</td>
|
||||||
|
<td>29</td>
|
||||||
|
<td>2011/06/27</td>
|
||||||
|
<td>$183,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Donna Snider</td>
|
||||||
|
<td>Customer Support</td>
|
||||||
|
<td>New York</td>
|
||||||
|
<td>27</td>
|
||||||
|
<td>2011/01/25</td>
|
||||||
|
<td>$112,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { DatatablesComponent } from './datatables.component';
|
||||||
|
|
||||||
|
describe('DatatablesComponent', () => {
|
||||||
|
let component: DatatablesComponent;
|
||||||
|
let fixture: ComponentFixture<DatatablesComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ DatatablesComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(DatatablesComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-datatables',
|
||||||
|
templateUrl: './datatables.component.html',
|
||||||
|
})
|
||||||
|
export class DatatablesComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#example-table').DataTable({
|
||||||
|
pageLength: 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="m-t-20">404</h1>
|
||||||
|
<p class="error-title">PAGE NOT FOUND</p>
|
||||||
|
<p class="m-b-20">Sorry, the page you were looking for could not found. Please check the URL and try your luck again.
|
||||||
|
<a class="color-green" routerLink="/index">Go homepage</a> or try the search bar below.</p>
|
||||||
|
<form action='javascript:;'>
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search for page">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-success" type="button">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.content{
|
||||||
|
max-width: 450px;
|
||||||
|
margin:0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content h1 {
|
||||||
|
font-size: 160px
|
||||||
|
}
|
||||||
|
.error-title {
|
||||||
|
font-size:22px;
|
||||||
|
font-weight:500;
|
||||||
|
margin-top: 30px
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { Error404Component } from './error-404.component';
|
||||||
|
|
||||||
|
describe('Error404Component', () => {
|
||||||
|
let component: Error404Component;
|
||||||
|
let fixture: ComponentFixture<Error404Component>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ Error404Component ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(Error404Component);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-error-404',
|
||||||
|
templateUrl: './error-404.component.html',
|
||||||
|
})
|
||||||
|
export class Error404Component implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
$('body').addClass('empty-layout bg-silver-100');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() { }
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
$('body').removeClass('empty-layout bg-silver-100');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="m-t-20">500</h1>
|
||||||
|
<p class="error-title">Internal Server Error</p>
|
||||||
|
<p class="m-b-20">We're sorry, but the server was unable to complete your request. You can
|
||||||
|
<a class="color-green" routerLink="/index">Go homepage</a> or try the search bar below.</p>
|
||||||
|
<form>
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search for page">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-success" type="button">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.content{
|
||||||
|
max-width: 450px;
|
||||||
|
margin:0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content h1 {
|
||||||
|
font-size: 160px
|
||||||
|
}
|
||||||
|
.error-title {
|
||||||
|
font-size:22px;
|
||||||
|
font-weight:500;
|
||||||
|
margin-top: 30px
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { Error500Component } from './error-500.component';
|
||||||
|
|
||||||
|
describe('Error500Component', () => {
|
||||||
|
let component: Error500Component;
|
||||||
|
let fixture: ComponentFixture<Error500Component>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ Error500Component ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(Error500Component);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-error-500',
|
||||||
|
templateUrl: './error-500.component.html',
|
||||||
|
})
|
||||||
|
export class Error500Component implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
$('body').addClass('empty-layout bg-silver-100');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() { }
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
$('body').removeClass('empty-layout bg-silver-100');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-size: 44px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 400px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
.content form {
|
||||||
|
padding: 15px 20px 20px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.login-header {margin:10px 0 20px 0;}
|
||||||
|
.login-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 56px;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #6bd6db;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #2CC4CB;
|
||||||
|
}
|
||||||
|
.login-header a{
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 0;
|
||||||
|
background-color: #c7cccf;
|
||||||
|
}
|
||||||
|
.login-header a.active {
|
||||||
|
background-color: #fff;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.login-title {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.social-auth-hr {
|
||||||
|
text-align: center;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.social-auth-hr span {
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.login-footer {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #ebedee;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div class="content">
|
||||||
|
<div class="brand">
|
||||||
|
<a class="link" routerLink="/index">AdminCAST</a>
|
||||||
|
</div>
|
||||||
|
<form id="forgot-form" action="javascript:;" method="post">
|
||||||
|
<h3 class="m-t-10 m-b-10">Forgot password</h3>
|
||||||
|
<p class="m-b-20">Enter your email address below and we'll send you password reset instructions.</p>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="email" name="email" placeholder="Email" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-info btn-block" type="submit">Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ForgotPasswordComponent } from './forgot-password.component';
|
||||||
|
|
||||||
|
describe('ForgotPasswordComponent', () => {
|
||||||
|
let component: ForgotPasswordComponent;
|
||||||
|
let fixture: ComponentFixture<ForgotPasswordComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ ForgotPasswordComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ForgotPasswordComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-forgot-password',
|
||||||
|
templateUrl: './forgot-password.component.html',
|
||||||
|
styleUrls: ['./forgot-password.component.css'],
|
||||||
|
})
|
||||||
|
export class ForgotPasswordComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
$('body').addClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#forgot-form').validate({
|
||||||
|
errorClass: "help-block",
|
||||||
|
rules: {
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
email: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
highlight: function(e) {
|
||||||
|
$(e).closest(".form-group").addClass("has-error")
|
||||||
|
},
|
||||||
|
unhighlight: function(e) {
|
||||||
|
$(e).closest(".form-group").removeClass("has-error")
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
$('body').removeClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,297 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Advanced Plugins</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Advanced Plugins</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Select 2
|
||||||
|
<a class="btn btn-xs btn-default m-l-5" href="https://select2.github.io/" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label">Single select</label>
|
||||||
|
<select class="form-control select2_demo_1">
|
||||||
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
||||||
|
<option value="AK">Alaska</option>
|
||||||
|
<option value="HI">Hawaii</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Pacific Time Zone">
|
||||||
|
<option value="CA">California</option>
|
||||||
|
<option value="NV">Nevada</option>
|
||||||
|
<option value="OR">Oregon</option>
|
||||||
|
<option value="WA">Washington</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Mountain Time Zone">
|
||||||
|
<option value="AZ">Arizona</option>
|
||||||
|
<option value="CO">Colorado</option>
|
||||||
|
<option value="ID">Idaho</option>
|
||||||
|
<option value="MT">Montana</option>
|
||||||
|
<option value="NE">Nebraska</option>
|
||||||
|
<option value="NM">New Mexico</option>
|
||||||
|
<option value="ND">North Dakota</option>
|
||||||
|
<option value="UT">Utah</option>
|
||||||
|
<option value="WY">Wyoming</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Central Time Zone">
|
||||||
|
<option value="AL">Alabama</option>
|
||||||
|
<option value="AR">Arkansas</option>
|
||||||
|
<option value="IL">Illinois</option>
|
||||||
|
<option value="IA">Iowa</option>
|
||||||
|
<option value="KS">Kansas</option>
|
||||||
|
<option value="KY">Kentucky</option>
|
||||||
|
<option value="LA">Louisiana</option>
|
||||||
|
<option value="MN">Minnesota</option>
|
||||||
|
<option value="MS">Mississippi</option>
|
||||||
|
<option value="MO">Missouri</option>
|
||||||
|
<option value="OK">Oklahoma</option>
|
||||||
|
<option value="SD">South Dakota</option>
|
||||||
|
<option value="TX">Texas</option>
|
||||||
|
<option value="TN">Tennessee</option>
|
||||||
|
<option value="WI">Wisconsin</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Eastern Time Zone">
|
||||||
|
<option value="CT">Connecticut</option>
|
||||||
|
<option value="DE">Delaware</option>
|
||||||
|
<option value="FL">Florida</option>
|
||||||
|
<option value="GA">Georgia</option>
|
||||||
|
<option value="IN">Indiana</option>
|
||||||
|
<option value="ME">Maine</option>
|
||||||
|
<option value="MD">Maryland</option>
|
||||||
|
<option value="MA">Massachusetts</option>
|
||||||
|
<option value="MI">Michigan</option>
|
||||||
|
<option value="NH">New Hampshire</option>
|
||||||
|
<option value="NJ">New Jersey</option>
|
||||||
|
<option value="NY">New York</option>
|
||||||
|
<option value="NC">North Carolina</option>
|
||||||
|
<option value="OH">Ohio</option>
|
||||||
|
<option value="PA">Pennsylvania</option>
|
||||||
|
<option value="RI">Rhode Island</option>
|
||||||
|
<option value="SC">South Carolina</option>
|
||||||
|
<option value="VT">Vermont</option>
|
||||||
|
<option value="VA">Virginia</option>
|
||||||
|
<option value="WV">West Virginia</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label">Multiple select</label>
|
||||||
|
<select class="form-control select2_demo_1" multiple="">
|
||||||
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
||||||
|
<option value="AK">Alaska</option>
|
||||||
|
<option value="HI">Hawaii</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Pacific Time Zone">
|
||||||
|
<option value="CA">California</option>
|
||||||
|
<option value="NV">Nevada</option>
|
||||||
|
<option value="OR">Oregon</option>
|
||||||
|
<option value="WA">Washington</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Mountain Time Zone">
|
||||||
|
<option value="AZ">Arizona</option>
|
||||||
|
<option value="CO">Colorado</option>
|
||||||
|
<option value="ID">Idaho</option>
|
||||||
|
<option value="MT">Montana</option>
|
||||||
|
<option value="NE">Nebraska</option>
|
||||||
|
<option value="NM">New Mexico</option>
|
||||||
|
<option value="ND">North Dakota</option>
|
||||||
|
<option value="UT">Utah</option>
|
||||||
|
<option value="WY">Wyoming</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-control-label">With Placeholder & allow clear</label>
|
||||||
|
<select class="form-control select2_demo_2">
|
||||||
|
<option></option>
|
||||||
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
||||||
|
<option value="AK">Alaska</option>
|
||||||
|
<option value="HI">Hawaii</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Pacific Time Zone">
|
||||||
|
<option value="CA">California</option>
|
||||||
|
<option value="NV">Nevada</option>
|
||||||
|
<option value="OR">Oregon</option>
|
||||||
|
<option value="WA">Washington</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Mountain Time Zone">
|
||||||
|
<option value="AZ">Arizona</option>
|
||||||
|
<option value="CO">Colorado</option>
|
||||||
|
<option value="ID">Idaho</option>
|
||||||
|
<option value="MT">Montana</option>
|
||||||
|
<option value="NE">Nebraska</option>
|
||||||
|
<option value="NM">New Mexico</option>
|
||||||
|
<option value="ND">North Dakota</option>
|
||||||
|
<option value="UT">Utah</option>
|
||||||
|
<option value="WY">Wyoming</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Data picker
|
||||||
|
<a class="btn btn-default btn-xs" href="https://github.com/uxsolutions/bootstrap-datepicker" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="form-group" id="date_1">
|
||||||
|
<label class="font-normal"></label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon bg-white"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" type="text" value="04/12/2017">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="date_2">
|
||||||
|
<label class="font-normal">One Year view</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" type="text" value="07/11/2017">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="date_3">
|
||||||
|
<label class="font-normal">Decade view</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" type="text" value="08/12/2017">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="date_4">
|
||||||
|
<label class="font-normal">Month select</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" type="text" value="06/12/2017">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="date_5">
|
||||||
|
<label class="font-normal">Range select</label>
|
||||||
|
<div class="input-daterange input-group" id="datepicker">
|
||||||
|
<input class="input-sm form-control" type="text" name="start" value="04/12/2017">
|
||||||
|
<span class="input-group-addon p-l-10 p-r-10">to</span>
|
||||||
|
<input class="input-sm form-control" type="text" name="end" value="08/17/2018">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Inline</label>
|
||||||
|
<div id="date_6" data-date-format="mm/dd/yyyy"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Timepicker
|
||||||
|
<a class="btn btn-default btn-xs" href="https://jdewit.github.io/bootstrap-timepicker/" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="input-group bootstrap-timepicker timepicker" data-autoclose="true">
|
||||||
|
<input class="form-control" type="text">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<span class="fa fa-clock-o"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">jQuery MiniColors
|
||||||
|
<a class="btn btn-default btn-xs" href="http://labs.abeautifulsite.net/jquery-minicolors/" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Hue (default)</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-control="hue" value="#F75A5F">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Saturation</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-control="saturation" value="#18C5A9">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Brightness</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-control="brightness" value="#F39C12">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Wheel</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-control="wheel" value="#23B7E5">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Hidden input</label>
|
||||||
|
<input class="form-control minicolors" type="hidden" value="#3498DB">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>RGB</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-format="rgb" value="rgb(33, 147, 58)">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>RGBA</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-format="rgb" data-opacity="0.50" value="rgba(52, 64, 158, 0.5)">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Swatches</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff" value="#17e8c9">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Swatches and opacity</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-format="rgb" data-opacity="0.50" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="rgba(14, 206, 235, .5)">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>bottom right</label>
|
||||||
|
<input class="form-control minicolors" type="text" data-position="bottom right" value="#6654a8">
|
||||||
|
</div>
|
||||||
|
<p>Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top left</code>, and <code>top right</code>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Knob - Dial
|
||||||
|
<a class="btn btn-xs btn-default m-l-5" href="https://github.com/aterrien/jQuery-Knob" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4 m-b-20">
|
||||||
|
<input class="dial" value="45" data-width="85" data-height="85" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 m-b-20">
|
||||||
|
<input class="dial" value="550" data-width="85" data-height="85" data-thickness=".2" data-fgcolor="#18C5A9" data-min="-1000" data-max="1000" data-step="10" data-displayprevious="true" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 m-b-20">
|
||||||
|
<input class="dial" value="20" data-width="85" data-height="85" data-fgcolor="#f75a5f" data-cursor="true" data-thicknessx=".3" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4 m-b-20">
|
||||||
|
<input class="dial" value="45" data-width="85" data-height="85" data-fgcolor="#F39C12" data-angleoffset="90" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 m-b-20">
|
||||||
|
<input class="dial" value="10.4" data-width="85" data-height="85" data-fgcolor="#2CC4CB" data-step=".1" data-min="-100" data-displayprevious="true" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 m-b-20">
|
||||||
|
<input class="dial" value="42" data-width="85" data-height="85" data-fgcolor="#f75a5f" data-angleoffset="-125" data-anglearc="250" data-rotation="anticlockwise" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 m-b-20 text-center">
|
||||||
|
<input class="dial" value="0" data-width="110" data-height="110" data-thickness=".2" data-fgcolor="#18C5A9" data-max="500" data-min="-500" data-displayprevious="true" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 m-b-20 text-center">
|
||||||
|
<input class="dial" value="22.6" data-width="110" data-height="110" data-fgcolor="#2CC4CB" data-step=".1" data-min="-100" data-displayprevious="true" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FormAdvancedComponent } from './form-advanced.component';
|
||||||
|
|
||||||
|
describe('FormAdvancedComponent', () => {
|
||||||
|
let component: FormAdvancedComponent;
|
||||||
|
let fixture: ComponentFixture<FormAdvancedComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FormAdvancedComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FormAdvancedComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-form-advanced',
|
||||||
|
templateUrl: './form-advanced.component.html',
|
||||||
|
})
|
||||||
|
export class FormAdvancedComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/form-plugins.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,534 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Basic Form</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Basic Form</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Basic form</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
<a class="dropdown-item">option 1</a>
|
||||||
|
<a class="dropdown-item">option 2</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 form-group">
|
||||||
|
<label>First Name</label>
|
||||||
|
<input class="form-control" type="text" placeholder="First Name">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 form-group">
|
||||||
|
<label>Last Name</label>
|
||||||
|
<input class="form-control" type="text" placeholder="First Name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email</label>
|
||||||
|
<input class="form-control" type="text" placeholder="Email address">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password</label>
|
||||||
|
<input class="form-control" type="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Remamber me</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-default" type="submit">Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Horizontal Form</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="fullscreen-link"><i class="fa fa-expand"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Email</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" placeholder="Email address">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Password</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Gender</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-10 ml-sm-auto">
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Remamber me</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-10 ml-sm-auto">
|
||||||
|
<button class="btn btn-info" type="submit">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Inline Form</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<form class="form-inline">
|
||||||
|
<label class="sr-only" for="ex-email">Email</label>
|
||||||
|
<input class="form-control mb-2 mr-sm-2 mb-sm-0" id="ex-email" type="text" placeholder="Email address">
|
||||||
|
<label class="sr-only" for="ex-pass">Email</label>
|
||||||
|
<input class="form-control mb-2 mr-sm-2 mb-sm-0" id="ex-pass" type="password" placeholder="Password">
|
||||||
|
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
|
||||||
|
<label class="ui-checkbox ui-checkbox-inline">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Remamber me</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-success" type="submit">Login</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Form Elements</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="fullscreen-link"><i class="fa fa-expand"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Default input</label>
|
||||||
|
<input class="form-control" type="text" placeholder="Default input">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Rounded input</label>
|
||||||
|
<input class="form-control input-rounded" type="text" placeholder="Rounded input">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>With Help text</label>
|
||||||
|
<input class="form-control" type="text" placeholder="With Help text">
|
||||||
|
<span class="help-block">This is some placeholder block-level help text for the above input.</span>
|
||||||
|
</div>
|
||||||
|
<h4>Input Groups</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon"><i class="fa fa-envelope"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
<div class="input-group-addon">@example.com</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon bg-white">$</div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
<div class="input-group-addon bg-white">.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon"><i class="fa fa-lock font-16"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon"><i class="fa fa-user"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
<div class="input-group-addon"><i class="fa fa-link"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon">
|
||||||
|
<input type="checkbox">
|
||||||
|
</div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-addon">
|
||||||
|
<input type="radio">
|
||||||
|
</div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4>Input Button Groups</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-info" type="button">Go!</button>
|
||||||
|
</div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-primary" type="button">Go!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<a class="dropdown-item">option 1</a>
|
||||||
|
<a class="dropdown-item">option 2</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<a class="dropdown-item">option 1</a>
|
||||||
|
<a class="dropdown-item">option 2</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="input group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-info" type="button">Action</button>
|
||||||
|
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<a class="dropdown-item">option 1</a>
|
||||||
|
<a class="dropdown-item">option 2</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4>With Icons</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon">
|
||||||
|
<div class="input-icon"><i class="fa fa-link"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon">
|
||||||
|
<div class="input-icon"><i class="fa fa-keyboard-o"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon">
|
||||||
|
<div class="input-icon"><i class="fa fa-microphone text-primary font-15"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-eye"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-lock font-16"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-check text-success"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="icon-cancel text-danger"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="with icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Disabled</label>
|
||||||
|
<input class="form-control" type="text" placeholder="Disabled input" disabled="">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Static control</label>
|
||||||
|
<p class="form-control-static">email@example.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Select</label>
|
||||||
|
<select class="form-control">
|
||||||
|
<option value="">option 1</option>
|
||||||
|
<option value="">option 2</option>
|
||||||
|
<option value="">option 3</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Multiple Select</label>
|
||||||
|
<select class="form-control" multiple="">
|
||||||
|
<option value="">option 1</option>
|
||||||
|
<option value="">option 2</option>
|
||||||
|
<option value="">option 3</option>
|
||||||
|
<option value="">option 4</option>
|
||||||
|
<option value="">option 5</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>textarea</label>
|
||||||
|
<textarea class="form-control" rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Checkboxes & Radios</label>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 m-b-20">
|
||||||
|
<div class="check-list">
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Checkbox</label>
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Checkbox</label>
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox" checked="">
|
||||||
|
<span class="input-span"></span>Checked</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Checkbox gray</label>
|
||||||
|
<label class="ui-checkbox disabled">
|
||||||
|
<input type="checkbox" disabled="">
|
||||||
|
<span class="input-span"></span>Disabled</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 m-b-20">
|
||||||
|
<div class="check-list">
|
||||||
|
<label class="ui-checkbox ui-checkbox-primary">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Primary</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-success">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Success</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Info</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-warning">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Warning</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-danger">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Danger</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 m-b-20">
|
||||||
|
<div class="check-list">
|
||||||
|
<label class="ui-radio">
|
||||||
|
<input type="radio" name="test">
|
||||||
|
<span class="input-span"></span>Radio</label>
|
||||||
|
<label class="ui-radio">
|
||||||
|
<input type="radio" name="test">
|
||||||
|
<span class="input-span"></span>Radio</label>
|
||||||
|
<label class="ui-radio">
|
||||||
|
<input type="radio" name="test" checked="">
|
||||||
|
<span class="input-span"></span>Checked</label>
|
||||||
|
<label class="ui-radio ui-radio-gray">
|
||||||
|
<input type="radio" name="test">
|
||||||
|
<span class="input-span"></span>Radio Gray</label>
|
||||||
|
<label class="ui-radio disabled">
|
||||||
|
<input type="radio" name="test" disabled="">
|
||||||
|
<span class="input-span"></span>Disabled</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 m-b-20">
|
||||||
|
<div class="check-list">
|
||||||
|
<label class="ui-radio ui-radio-primary">
|
||||||
|
<input type="radio" name="test2">
|
||||||
|
<span class="input-span"></span>Primary</label>
|
||||||
|
<label class="ui-radio ui-radio-success">
|
||||||
|
<input type="radio" name="test2">
|
||||||
|
<span class="input-span"></span>Success</label>
|
||||||
|
<label class="ui-radio ui-radio-info">
|
||||||
|
<input type="radio" name="test2">
|
||||||
|
<span class="input-span"></span>Info</label>
|
||||||
|
<label class="ui-radio ui-radio-warning">
|
||||||
|
<input type="radio" name="test2">
|
||||||
|
<span class="input-span"></span>Warning</label>
|
||||||
|
<label class="ui-radio ui-radio-danger">
|
||||||
|
<input type="radio" name="test2">
|
||||||
|
<span class="input-span"></span>Danger</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Inline Checkboxes</label>
|
||||||
|
<div class="m-b-10">
|
||||||
|
<label class="ui-checkbox ui-checkbox-inline">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Option 1</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-inline">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Option 2</label>
|
||||||
|
<label class="ui-checkbox ui-checkbox-inline">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Option 3</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="ui-radio ui-radio-inline">
|
||||||
|
<input type="radio" name="test">
|
||||||
|
<span class="input-span"></span>Option 1</label>
|
||||||
|
<label class="ui-radio ui-radio-inline">
|
||||||
|
<input type="radio" name="test">
|
||||||
|
<span class="input-span"></span>Option 2</label>
|
||||||
|
<label class="ui-radio ui-radio-inline">
|
||||||
|
<input type="radio" name="test">
|
||||||
|
<span class="input-span"></span>Option 3</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Form Elements</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="fullscreen-link"><i class="fa fa-expand"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<h4>Control sizing</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control input-sm" type="text" placeholder="Small">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Default">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control input-lg" type="text" placeholder="Big">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<div class="input-group-addon"><i class="fa fa-envelope"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="small input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group input-group-lg">
|
||||||
|
<div class="input-group-addon"><i class="fa fa-link"></i></div>
|
||||||
|
<input class="form-control" type="text" placeholder="large input group">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select class="form-control input-sm">
|
||||||
|
<option>Small select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select class="form-control">
|
||||||
|
<option>Default select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select class="form-control input-lg">
|
||||||
|
<option>Big select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-success">
|
||||||
|
<label class="col-form-label">Input success state</label>
|
||||||
|
<input class="form-control" type="text" placeholderx="Rounded input">
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-warning">
|
||||||
|
<label class="col-form-label">Input warning state</label>
|
||||||
|
<input class="form-control" type="text" placeholderx="Rounded input">
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-error">
|
||||||
|
<label class="col-form-label">Input error state</label>
|
||||||
|
<input class="form-control" type="text" placeholderx="Rounded input">
|
||||||
|
</div>
|
||||||
|
<h4>With icons</h4>
|
||||||
|
<div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-form-label">Default input</label>
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-info-circle"></i></div>
|
||||||
|
<input class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-success">
|
||||||
|
<label class="col-form-label">Input success state</label>
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-check"></i></div>
|
||||||
|
<input class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-warning">
|
||||||
|
<label class="col-form-label">Input warning state</label>
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-warning"></i></div>
|
||||||
|
<input class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group has-error">
|
||||||
|
<label class="col-form-label">Input error state</label>
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-exclamation"></i></div>
|
||||||
|
<input class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-form-basic',
|
||||||
|
templateUrl: './form-basic.component.html',
|
||||||
|
})
|
||||||
|
export class FormBasicComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,82 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Form Validation</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Form Validation</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="alert bg-white">
|
||||||
|
<h4>jQuery Validation Plugin</h4>
|
||||||
|
<p>This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. For more info please check out</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-success" href="https://jqueryvalidation.org/" target="_blank">Official Site</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Basic Validation</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<form class="form-horizontal" id="form-sample-1" method="post" novalidate="novalidate">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Name</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Email</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="email">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Website</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="url">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Number</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="number">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Min length</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="min">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Max length</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="max">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">EqualTo (confirm)</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" id="password" type="text" name="password" placeholder="password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-10 ml-sm-auto">
|
||||||
|
<input class="form-control" type="text" name="password_confirmation" placeholder="confirm password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="col-sm-10 ml-sm-auto">
|
||||||
|
<button class="btn btn-info" type="submit">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FormValidationComponent } from './form-validation.component';
|
||||||
|
|
||||||
|
describe('FormValidationComponent', () => {
|
||||||
|
let component: FormValidationComponent;
|
||||||
|
let fixture: ComponentFixture<FormValidationComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FormValidationComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FormValidationComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-form-validation',
|
||||||
|
templateUrl: './form-validation.component.html',
|
||||||
|
})
|
||||||
|
export class FormValidationComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$("#form-sample-1").validate({
|
||||||
|
rules: {
|
||||||
|
name: {
|
||||||
|
minlength: 2,
|
||||||
|
required: !0
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required: !0,
|
||||||
|
email: !0
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
required: !0,
|
||||||
|
url: !0
|
||||||
|
},
|
||||||
|
number: {
|
||||||
|
required: !0,
|
||||||
|
number: !0
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
required: !0,
|
||||||
|
minlength: 3
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
required: !0,
|
||||||
|
maxlength: 4
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required: !0
|
||||||
|
},
|
||||||
|
password_confirmation: {
|
||||||
|
required: !0,
|
||||||
|
equalTo: "#password"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
errorClass: "help-block error",
|
||||||
|
highlight: function(e) {
|
||||||
|
$(e).closest(".form-group.row").addClass("has-error")
|
||||||
|
},
|
||||||
|
unhighlight: function(e) {
|
||||||
|
$(e).closest(".form-group.row").removeClass("has-error")
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,95 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Form masks</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Form masks</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="alert bg-white">
|
||||||
|
<h4>Masked Input Plugin</h4>
|
||||||
|
<p>This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-success" href="https://github.com/digitalBush/jquery.maskedinput" target="_blank">Official Site</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Input Masks</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Date</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-date" type="text">
|
||||||
|
<span class="help-block">Data format dd/mm/yyyy
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Phone</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-phone" type="text">
|
||||||
|
<span class="help-block">Data format (999) 999-9999</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Phone 2</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-phone2" type="text">
|
||||||
|
<span class="help-block">Data format +186 999 999-9999</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Extention</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-ext" type="text">
|
||||||
|
<span class="help-block">Data format (999) 999-9999? x9999</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Credit card</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-credit" type="text">
|
||||||
|
<span class="help-block">Data format ****-****-****-****</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Tax ID</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-tax" type="text">
|
||||||
|
<span class="help-block">Data format 99-9999999</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Currency</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-currency" type="text">
|
||||||
|
<span class="help-block">Data format $ 99.99</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Product Key</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-product" type="text">
|
||||||
|
<span class="help-block">Data format a*-999-a999</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">Eye Script</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="ex-eye" type="text">
|
||||||
|
<span class="help-block">Data format ~9.99 ~9.99 999</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { InputMasksComponent } from './input-masks.component';
|
||||||
|
|
||||||
|
describe('InputMasksComponent', () => {
|
||||||
|
let component: InputMasksComponent;
|
||||||
|
let fixture: ComponentFixture<InputMasksComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ InputMasksComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(InputMasksComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-input-masks',
|
||||||
|
templateUrl: './input-masks.component.html',
|
||||||
|
})
|
||||||
|
export class InputMasksComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#ex-date').mask('99/99/9999', {
|
||||||
|
placeholder: 'dd/mm/yyyy'
|
||||||
|
});
|
||||||
|
$('#ex-phone').mask('(999) 999-9999');
|
||||||
|
$('#ex-phone2').mask('+186 999 999-9999');
|
||||||
|
$('#ex-ext').mask('(999) 999-9999? x9999');
|
||||||
|
$('#ex-credit').mask('****-****-****-****', {
|
||||||
|
placeholder: '*'
|
||||||
|
});
|
||||||
|
$('#ex-tax').mask('99-9999999');
|
||||||
|
$('#ex-currency').mask('$ 99.99');
|
||||||
|
$('#ex-product').mask('a*-999-a999', {
|
||||||
|
placeholder: 'a*-999-a999'
|
||||||
|
});
|
||||||
|
|
||||||
|
$.mask.definitions['~'] = '[+-]';
|
||||||
|
$('#ex-eye').mask('~9.99 ~9.99 999');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,83 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Text Editors</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Text Editors</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Summernote Editor
|
||||||
|
<a class="btn btn-xs btn-default m-l-5" href="http://summernote.org/" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="summernote" data-plugin="summernote" data-air-mode="true">
|
||||||
|
<h2>WYSIWYG Editor</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper sapien non nisl facilisis bibendum in quis tellus. Duis in urna bibendum turpis pretium fringilla. Aenean neque velit, porta eget
|
||||||
|
mattis ac, imperdiet quis nisi. Donec non dui et tortor vulputate luctus. Praesent consequat rhoncus velit, ut molestie arcu venenatis sodales.
|
||||||
|
<h4>Lacinia</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Suspendisse tincidunt urna ut velit ullamcorper fermentum.</li>
|
||||||
|
<li>Nullam mattis sodales lacus, in gravida sem auctor at.</li>
|
||||||
|
<li>Praesent non lacinia mi.</li>
|
||||||
|
<li>Mauris a ante neque.</li>
|
||||||
|
<li>Aenean ut magna lobortis nunc feugiat sagittis.</li>
|
||||||
|
</ul>
|
||||||
|
<h4>Pellentesque Adipiscing</h4> Maecenas quis ante ante. Nunc adipiscing rhoncus rutrum. Pellentesque adipiscing urna mi, ut tempus lacus ultrices ac. Pellentesque sodales, libero et mollis interdum, dui odio vestibulum dolor,
|
||||||
|
eu pellentesque nisl nibh quis nunc. Sed porttitor leo adipiscing venenatis vehicula. Aenean quis viverra enim. Praesent porttitor ut ipsum id ornare.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Summernote Air-Mode</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="summernote_air" data-plugin="summernote" data-air-mode="true">
|
||||||
|
<h2>Air-Mode</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper sapien non nisl facilisis bibendum in quis tellus. Duis in urna bibendum turpis pretium fringilla. Aenean neque velit</p>
|
||||||
|
<ul>
|
||||||
|
<li>Suspendisse tincidunt urna ut velit ullamcorper fermentum.</li>
|
||||||
|
<li>Nullam mattis sodales lacus, in gravida sem auctor at.</li>
|
||||||
|
<li>Aenean ut magna lobortis nunc feugiat sagittis.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Markdown
|
||||||
|
<a class="btn btn-xs btn-default m-l-5" href="https://github.com/toopay/bootstrap-markdown" target="_blank">Official site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<p>Switch regular textarea within your form into Bootstrap-Markdown editor seamlessly by adding <code>data-provide="markdown"</code> attribute</p>
|
||||||
|
<textarea name="content" data-provide="markdown" data-iconlibrary="fa" rows="10">h1 header ============ Paragraphs are separated by a blank line. 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists look like: * this one * that one * the other one</textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Markdown Inline Editing</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<p>Inline editing with Bootstrap-Markdown is done by adding <code>data-provide="markdown-editable"</code> attribute</p>
|
||||||
|
<div data-provide="markdown-editable" data-iconlibrary="fa">
|
||||||
|
<h3>Heading is here</h3>
|
||||||
|
<p>Lorem ipsum dolor,<strong><b>consectetur adipisicing elit</b></strong>consectetur adipisicing elit, sed domagna aliqua. Ut enim ad minim veniam, quis nostrud <u>Exercitation</u> ullamco laboris nisi ut aliquip ex ea
|
||||||
|
commodo consequat.</p>
|
||||||
|
<h4>Title</h4>
|
||||||
|
<p>laboris nisi ut aliquip ex ea commodo consequat
|
||||||
|
<a href="http://www.github.com">link is here</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TextEditorsComponent } from './text-editors.component';
|
||||||
|
|
||||||
|
describe('TextEditorsComponent', () => {
|
||||||
|
let component: TextEditorsComponent;
|
||||||
|
let fixture: ComponentFixture<TextEditorsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ TextEditorsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TextEditorsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-text-editors',
|
||||||
|
templateUrl: './text-editors.component.html',
|
||||||
|
})
|
||||||
|
export class TextEditorsComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#summernote').summernote();
|
||||||
|
$('#summernote_air').summernote({
|
||||||
|
airMode: true
|
||||||
|
});
|
||||||
|
$('[data-provide="markdown"]').markdown({autofocus:false,savable:false});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,509 @@
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-md-6">
|
||||||
|
<div class="ibox bg-success color-white widget-stat">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<h2 class="m-b-5 font-strong">201</h2>
|
||||||
|
<div class="m-b-5">NEW ORDERS</div><i class="ti-shopping-cart widget-stat-icon"></i>
|
||||||
|
<div><i class="fa fa-level-up m-r-5"></i><small>25% higher</small></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6">
|
||||||
|
<div class="ibox bg-info color-white widget-stat">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<h2 class="m-b-5 font-strong">1250</h2>
|
||||||
|
<div class="m-b-5">UNIQUE VIEWS</div><i class="ti-bar-chart widget-stat-icon"></i>
|
||||||
|
<div><i class="fa fa-level-up m-r-5"></i><small>17% higher</small></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6">
|
||||||
|
<div class="ibox bg-warning color-white widget-stat">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<h2 class="m-b-5 font-strong">$1570</h2>
|
||||||
|
<div class="m-b-5">TOTAL INCOME</div><i class="fa fa-money widget-stat-icon"></i>
|
||||||
|
<div><i class="fa fa-level-up m-r-5"></i><small>22% higher</small></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6">
|
||||||
|
<div class="ibox bg-danger color-white widget-stat">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<h2 class="m-b-5 font-strong">108</h2>
|
||||||
|
<div class="m-b-5">NEW USERS</div><i class="ti-user widget-stat-icon"></i>
|
||||||
|
<div><i class="fa fa-level-down m-r-5"></i><small>-12% Lower</small></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="flexbox mb-4">
|
||||||
|
<div>
|
||||||
|
<h3 class="m-0">Statistics</h3>
|
||||||
|
<div>Your shop sales analytics</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-inline-flex">
|
||||||
|
<div class="px-3" style="border-right: 1px solid rgba(0,0,0,.1);">
|
||||||
|
<div class="text-muted">WEEKLY INCOME</div>
|
||||||
|
<div>
|
||||||
|
<span class="h2 m-0">$850</span>
|
||||||
|
<span class="text-success ml-2"><i class="fa fa-level-up"></i> +25%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-3">
|
||||||
|
<div class="text-muted">WEEKLY SALES</div>
|
||||||
|
<div>
|
||||||
|
<span class="h2 m-0">240</span>
|
||||||
|
<span class="text-warning ml-2"><i class="fa fa-level-down"></i> -12%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<canvas id="bar_chart" style="height:260px;"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Statistics</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<canvas id="doughnut_chart" style="height:160px;"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="m-b-20 text-success"><i class="fa fa-circle-o m-r-10"></i>Desktop 52%</div>
|
||||||
|
<div class="m-b-20 text-info"><i class="fa fa-circle-o m-r-10"></i>Tablet 27%</div>
|
||||||
|
<div class="m-b-20 text-warning"><i class="fa fa-circle-o m-r-10"></i>Mobile 21%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list-group list-group-divider list-group-full">
|
||||||
|
<li class="list-group-item">Chrome
|
||||||
|
<span class="float-right text-success"><i class="fa fa-caret-up"></i> 24%</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">Firefox
|
||||||
|
<span class="float-right text-success"><i class="fa fa-caret-up"></i> 12%</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">Opera
|
||||||
|
<span class="float-right text-danger"><i class="fa fa-caret-down"></i> 4%</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Visitors Statistics</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="world-map" style="height: 300px;"></div>
|
||||||
|
<table class="table table-striped m-t-20 visitors-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Country</th>
|
||||||
|
<th>Visits</th>
|
||||||
|
<th>Data</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/us.png" />USA</td>
|
||||||
|
<td>755</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width:52%; height:5px;" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">52%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/Canada.png" />Canada</td>
|
||||||
|
<td>700</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:48%; height:5px;" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">48%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/India.png" />India</td>
|
||||||
|
<td>410</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:37%; height:5px;" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">37%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/Australia.png" />Australia</td>
|
||||||
|
<td>304</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-info" role="progressbar" style="width:36%; height:5px;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">36%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/Singapore.png" />Singapore</td>
|
||||||
|
<td>203</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar" role="progressbar" style="width:35%; height:5px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">35%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/uk.png" />UK</td>
|
||||||
|
<td>202</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-info" role="progressbar" style="width:35%; height:5px;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">35%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img class="m-r-10" src="./assets/img/flags/UAE.png" />UAE</td>
|
||||||
|
<td>180</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:30%; height:5px;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<span class="progress-parcent">30%</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Tasks</div>
|
||||||
|
<div>
|
||||||
|
<a class="btn btn-info btn-sm" href="javascript:;">New Task</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<ul class="list-group list-group-divider list-group-full tasks-list">
|
||||||
|
<li class="list-group-item task-item">
|
||||||
|
<div>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray ui-checkbox-success">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
<span class="task-title">Meeting with Eliza</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="task-data"><small class="text-muted">10 July 2018</small></div>
|
||||||
|
<div class="task-actions">
|
||||||
|
<a href="javascript:;"><i class="fa fa-edit text-muted m-r-10"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash text-muted"></i></a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item task-item">
|
||||||
|
<div>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray ui-checkbox-success">
|
||||||
|
<input type="checkbox" checked="">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
<span class="task-title">Check your inbox</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="task-data"><small class="text-muted">22 May 2018</small></div>
|
||||||
|
<div class="task-actions">
|
||||||
|
<a href="javascript:;"><i class="fa fa-edit text-muted m-r-10"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash text-muted"></i></a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item task-item">
|
||||||
|
<div>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray ui-checkbox-success">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
<span class="task-title">Create Financial Report</span>
|
||||||
|
</label>
|
||||||
|
<span class="badge badge-danger m-l-5"><i class="ti-alarm-clock"></i> 1 hrs</span>
|
||||||
|
</div>
|
||||||
|
<div class="task-data"><small class="text-muted">No due date</small></div>
|
||||||
|
<div class="task-actions">
|
||||||
|
<a href="javascript:;"><i class="fa fa-edit text-muted m-r-10"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash text-muted"></i></a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item task-item">
|
||||||
|
<div>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray ui-checkbox-success">
|
||||||
|
<input type="checkbox" checked="">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
<span class="task-title">Send message to Mick</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="task-data"><small class="text-muted">04 Apr 2018</small></div>
|
||||||
|
<div class="task-actions">
|
||||||
|
<a href="javascript:;"><i class="fa fa-edit text-muted m-r-10"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash text-muted"></i></a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item task-item">
|
||||||
|
<div>
|
||||||
|
<label class="ui-checkbox ui-checkbox-gray ui-checkbox-success">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
<span class="task-title">Create new page</span>
|
||||||
|
</label>
|
||||||
|
<span class="badge badge-success m-l-5">2 Days</span>
|
||||||
|
</div>
|
||||||
|
<div class="task-data"><small class="text-muted">07 Dec 2018</small></div>
|
||||||
|
<div class="task-actions">
|
||||||
|
<a href="javascript:;"><i class="fa fa-edit text-muted m-r-10"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash text-muted"></i></a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Messages</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<ul class="media-list media-list-divider m-0">
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u1.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Jeanne Gonzalez <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u2.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Becky Brooks <small class="float-right text-muted">1 hrs ago</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u3.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Frank Cruz <small class="float-right text-muted">3 hrs ago</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u6.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Connor Perez <small class="float-right text-muted">Today</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Latest Orders</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
<a class="dropdown-item">option 1</a>
|
||||||
|
<a class="dropdown-item">option 2</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-striped table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Order ID</th>
|
||||||
|
<th>Customer</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th width="91px">Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="invoice.html">AT2584</a>
|
||||||
|
</td>
|
||||||
|
<td>@Jack</td>
|
||||||
|
<td>$564.00</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-success">Shipped</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="invoice.html">AT2575</a>
|
||||||
|
</td>
|
||||||
|
<td>@Amalia</td>
|
||||||
|
<td>$220.60</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-success">Shipped</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="invoice.html">AT1204</a>
|
||||||
|
</td>
|
||||||
|
<td>@Emma</td>
|
||||||
|
<td>$760.00</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-default">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="invoice.html">AT7578</a>
|
||||||
|
</td>
|
||||||
|
<td>@James</td>
|
||||||
|
<td>$87.60</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-warning">Expired</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="invoice.html">AT0158</a>
|
||||||
|
</td>
|
||||||
|
<td>@Ava</td>
|
||||||
|
<td>$430.50</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-default">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="invoice.html">AT0127</a>
|
||||||
|
</td>
|
||||||
|
<td>@Noah</td>
|
||||||
|
<td>$64.00</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-success">Shipped</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Best Sellers</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<ul class="media-list media-list-divider m-0">
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img src="./assets/img/image.jpg" width="50px;" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">
|
||||||
|
<a href="javascript:;">Samsung</a>
|
||||||
|
<span class="font-16 float-right">1200</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img src="./assets/img/image.jpg" width="50px;" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">
|
||||||
|
<a href="javascript:;">iPhone</a>
|
||||||
|
<span class="font-16 float-right">1150</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img src="./assets/img/image.jpg" width="50px;" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">
|
||||||
|
<a href="javascript:;">iMac</a>
|
||||||
|
<span class="font-16 float-right">800</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img src="./assets/img/image.jpg" width="50px;" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">
|
||||||
|
<a href="javascript:;">apple Watch</a>
|
||||||
|
<span class="font-16 float-right">705</span>
|
||||||
|
</div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-footer text-center">
|
||||||
|
<a href="javascript:;">View All Products</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.visitors-table tbody tr td:last-child {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visitors-table .progress {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visitors-table .progress-parcent {
|
||||||
|
text-align: right;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { HomeComponent } from './home.component';
|
||||||
|
|
||||||
|
describe('HomeComponent', () => {
|
||||||
|
let component: HomeComponent;
|
||||||
|
let fixture: ComponentFixture<HomeComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ HomeComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(HomeComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-home',
|
||||||
|
templateUrl: './home.component.html',
|
||||||
|
})
|
||||||
|
export class HomeComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/dashboard_1_demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,122 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Invoice</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Invoice</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="ibox invoice">
|
||||||
|
<div class="invoice-header">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="invoice-logo">
|
||||||
|
<img src="./assets/img/logos/github-logo.png" height="65px" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="m-b-5 font-bold">Invoice from</div>
|
||||||
|
<div>Github, Inc.</div>
|
||||||
|
<ul class="list-unstyled m-t-10">
|
||||||
|
<li class="m-b-5">
|
||||||
|
<span class="font-strong">A:</span> San Francisco, CA 94103 Market Street</li>
|
||||||
|
<li class="m-b-5">
|
||||||
|
<span class="font-strong">W:</span> adminca@exmail.com</li>
|
||||||
|
<li>
|
||||||
|
<span class="font-strong">P:</span> (123) 456-2112</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 text-right">
|
||||||
|
<div class="clf" style="margin-bottom:30px;">
|
||||||
|
<dl class="row pull-right" style="width:250px;"><dt class="col-sm-6">Invoice Date</dt>
|
||||||
|
<dd class="col-sm-6">10 April 2017</dd><dt class="col-sm-6">Issue Date</dt>
|
||||||
|
<dd class="col-sm-6">30 April 2017</dd><dt class="col-sm-6">Account No.</dt>
|
||||||
|
<dd class="col-sm-6">1450012</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="m-b-5 font-bold">Invoice To</div>
|
||||||
|
<div>Emma Johnson</div>
|
||||||
|
<ul class="list-unstyled m-t-10">
|
||||||
|
<li class="m-b-5">San Francisco, 548 Market St.</li>
|
||||||
|
<li class="m-b-5">emma.johnson@exmail.com</li>
|
||||||
|
<li>(123) 279-4058</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table class="table table-striped no-margin table-invoice">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Item Description</th>
|
||||||
|
<th>Quantity</th>
|
||||||
|
<th>Unit Price</th>
|
||||||
|
<th class="text-right">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div><strong>Flat Design</strong></div><small>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small></td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>$220.00</td>
|
||||||
|
<td>$440.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div><strong>Bootstrap theme</strong></div><small>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small></td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>$500.00</td>
|
||||||
|
<td>$500.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div><strong>Invoice Design</strong></div><small>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small></td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>$300.00</td>
|
||||||
|
<td>$900.00</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<table class="table no-border">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th width="15%"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="text-right">
|
||||||
|
<td>Subtotal:</td>
|
||||||
|
<td>$1840</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-right">
|
||||||
|
<td>TAX 5%:</td>
|
||||||
|
<td>$92</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="text-right">
|
||||||
|
<td class="font-bold font-18">TOTAL:</td>
|
||||||
|
<td class="font-bold font-18">$1748</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="text-right">
|
||||||
|
<button class="btn btn-info" type="button" onclick="javascript:window.print();"><i class="fa fa-print"></i> Print</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.invoice {
|
||||||
|
padding: 20px
|
||||||
|
}
|
||||||
|
.invoice-header {
|
||||||
|
margin-bottom: 50px
|
||||||
|
}
|
||||||
|
.invoice-logo {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.table-invoice tr td:last-child {text-align:right;}
|
||||||
|
</style>
|
||||||
|
</div>
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-invoice',
|
||||||
|
templateUrl: './invoice.component.html',
|
||||||
|
})
|
||||||
|
export class InvoiceComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,31 @@
|
||||||
|
<div class="content">
|
||||||
|
<div class="brand">
|
||||||
|
<a class="link" routerLink="/index">AdminCAST</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-center m-b-20">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u3.jpg" width="110px" />
|
||||||
|
</div>
|
||||||
|
<form class="text-center" id="lock-form" action="javascript:;" method="post">
|
||||||
|
<h5 class="font-strong">James Brown</h5>
|
||||||
|
<p class="font-13">Your are in lock screen. Enter your password to retrieve your session</p>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="password" name="password" placeholder="******">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-success btn-block" type="submit"> <i class="fa fa-unlock-alt m-r-5"></i>Unlock</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.brand {
|
||||||
|
font-size: 44px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
max-width: 300px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { LockscreenComponent } from './lockscreen.component';
|
||||||
|
|
||||||
|
describe('LockscreenComponent', () => {
|
||||||
|
let component: LockscreenComponent;
|
||||||
|
let fixture: ComponentFixture<LockscreenComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ LockscreenComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(LockscreenComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-lockscreen',
|
||||||
|
templateUrl: './lockscreen.component.html',
|
||||||
|
})
|
||||||
|
export class LockscreenComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
$('body').addClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#lock-form').validate({
|
||||||
|
errorClass: "help-block",
|
||||||
|
rules: {
|
||||||
|
password: {
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
highlight: function(e) {
|
||||||
|
$(e).closest(".form-group").addClass("has-error")
|
||||||
|
},
|
||||||
|
unhighlight: function(e) {
|
||||||
|
$(e).closest(".form-group").removeClass("has-error")
|
||||||
|
},
|
||||||
|
errorPlacement: function(e, r) {
|
||||||
|
var i = $(r).parents(".input-group, .check-list");
|
||||||
|
i.length ? i.after(e) : r.after(e)
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
$('body').removeClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-size: 44px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 400px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
.content form {
|
||||||
|
padding: 15px 20px 20px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.login-header {margin:10px 0 20px 0;}
|
||||||
|
.login-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 56px;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #6bd6db;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #2CC4CB;
|
||||||
|
}
|
||||||
|
.login-header a{
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 0;
|
||||||
|
background-color: #c7cccf;
|
||||||
|
}
|
||||||
|
.login-header a.active {
|
||||||
|
background-color: #fff;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.login-title {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.social-auth-hr {
|
||||||
|
text-align: center;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.social-auth-hr span {
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.login-footer {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #ebedee;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,42 @@
|
||||||
|
<div class="content">
|
||||||
|
<div class="brand">
|
||||||
|
<a class="link" routerLink="/index">AdminCAST</a>
|
||||||
|
</div>
|
||||||
|
<form id="login-form" action="javascript:;" method="post">
|
||||||
|
<h2 class="login-title">Log in</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-envelope"></i></div>
|
||||||
|
<input class="form-control" type="email" name="email" placeholder="Email" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group-icon right">
|
||||||
|
<div class="input-icon"><i class="fa fa-lock font-16"></i></div>
|
||||||
|
<input class="form-control" type="password" name="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group d-flex justify-content-between">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Remember me</label>
|
||||||
|
<a routerLink="/forgot_password">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-info btn-block" type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
<div class="social-auth-hr">
|
||||||
|
<span>Or login with</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-center social-auth m-b-20">
|
||||||
|
<a class="btn btn-social-icon btn-twitter m-r-5" href="javascript:;"><i class="fa fa-twitter"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-facebook m-r-5" href="javascript:;"><i class="fa fa-facebook"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-google m-r-5" href="javascript:;"><i class="fa fa-google-plus"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-linkedin m-r-5" href="javascript:;"><i class="fa fa-linkedin"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-vk" href="javascript:;"><i class="fa fa-vk"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">Not a member?
|
||||||
|
<a class="color-blue" routerLink="/register">Create accaunt</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { LoginComponent } from './login.component';
|
||||||
|
|
||||||
|
describe('LoginComponent', () => {
|
||||||
|
let component: LoginComponent;
|
||||||
|
let fixture: ComponentFixture<LoginComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ LoginComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(LoginComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-login',
|
||||||
|
templateUrl: './login.component.html',
|
||||||
|
styleUrls: ['./login.component.css'],
|
||||||
|
})
|
||||||
|
export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
$('body').addClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#login-form').validate({
|
||||||
|
errorClass: "help-block",
|
||||||
|
rules: {
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
email: true
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
highlight: function(e) {
|
||||||
|
$(e).closest(".form-group").addClass("has-error")
|
||||||
|
},
|
||||||
|
unhighlight: function(e) {
|
||||||
|
$(e).closest(".form-group").removeClass("has-error")
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
$('body').removeClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,110 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Compose mail</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Compose mail</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-md-4">
|
||||||
|
<a class="btn btn-info btn-block" href="mail_compose.html"><i class="fa fa-edit"></i> Compose</a><br>
|
||||||
|
<h6 class="m-t-10 m-b-10">FOLDERS</h6>
|
||||||
|
<ul class="list-group list-group-divider inbox-list">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-inbox"></i> Inbox (6)
|
||||||
|
<span class="badge badge-warning badge-square pull-right">17</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-envelope-o"></i> Sent</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-star-o"></i> Important
|
||||||
|
<span class="badge badge-success badge-square pull-right">2</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-file-text-o"></i> Drafts</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash-o"></i> Trash</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h6 class="m-t-10 m-b-10">LABELS</h6>
|
||||||
|
<ul class="list-group list-group-divider inbox-list">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-success"></i> Support</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-warning"></i> Business</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-info"></i> Work</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-danger"></i> System</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-muted"></i> Social</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9 col-md-8">
|
||||||
|
<div class="ibox" id="mailbox-container">
|
||||||
|
<div class="mailbox-header d-flex justify-content-between">
|
||||||
|
<h5 class="inbox-title">Compose mail</h5>
|
||||||
|
<div class="inbox-toolbar m-l-20">
|
||||||
|
<button class="btn btn-default btn-sm" data-action="reply" data-toggle="tooltip" data-original-title="Reply"><i class="fa fa-reply"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-action="delete" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-trash-o"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mailbox-body">
|
||||||
|
<form class="form-horizontal" action="javascript:void(0)" method="POST" if="compose_form">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 control-label">To:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="to" value="example@gmail.com">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 control-label">Subject:</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input class="form-control" type="text" name="subject">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea id="summernote" name="message">
|
||||||
|
<h4>Thank you for your attention</h4>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur velit, corporis iste. Dolorem sapiente at, quibusdam fuga ea voluptatem iste. Cupiditate dignissimos, iure impedit, perferendis in beatae fuga
|
||||||
|
voluptate, sapiente pariatur, libero ab odit. Placeat saepe sunt ipsam laboriosam temporibus nostrum ea optio, dolore soluta.</p>
|
||||||
|
</textarea>
|
||||||
|
<input class="btn btn-info m-t-20" type="submit">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.inbox-list li a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.inbox-list li a i {margin-right:5px}
|
||||||
|
.mailbox-header, .mailbox-body {padding: 15px}
|
||||||
|
.inbox-title {white-space: normal; margin: 8px 0; font-weight: 600;}
|
||||||
|
.mail-search {width:300px}
|
||||||
|
.inbox-toolbar {white-space: nowrap}
|
||||||
|
.table-inbox tr.unread {font-weight: 600;}
|
||||||
|
.table-inbox tr > td:first-child {padding-left:15px}
|
||||||
|
|
||||||
|
.mail-attachments .card{
|
||||||
|
width: 220px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.mail-search {width:100%}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-mail-compose',
|
||||||
|
templateUrl: './mail-compose.component.html',
|
||||||
|
})
|
||||||
|
export class MailComposeComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#summernote').summernote();
|
||||||
|
$('.note-popover').css({
|
||||||
|
'display': 'none'
|
||||||
|
});
|
||||||
|
$('[data-provide="markdown"]').markdown({autofocus:false,savable:false});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,140 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Mail View</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Mail View</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-md-4">
|
||||||
|
<a class="btn btn-info btn-block" href="mail_compose.html"><i class="fa fa-edit"></i> Compose</a><br>
|
||||||
|
<h6 class="m-t-10 m-b-10">FOLDERS</h6>
|
||||||
|
<ul class="list-group list-group-divider inbox-list">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-inbox"></i> Inbox (6)
|
||||||
|
<span class="badge badge-warning badge-square pull-right">17</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-envelope-o"></i> Sent</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-star-o"></i> Important
|
||||||
|
<span class="badge badge-success badge-square pull-right">2</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-file-text-o"></i> Drafts</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash-o"></i> Trash</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h6 class="m-t-10 m-b-10">LABELS</h6>
|
||||||
|
<ul class="list-group list-group-divider inbox-list">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-success"></i> Support</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-warning"></i> Business</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-info"></i> Work</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-danger"></i> System</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-muted"></i> Social</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9 col-md-8">
|
||||||
|
<div class="ibox" id="mailbox-container">
|
||||||
|
<div class="mailbox-header d-flex justify-content-between" style="border-bottom: 1px solid #e8e8e8;">
|
||||||
|
<div>
|
||||||
|
<h5 class="inbox-title">Save your time. Choose the best.</h5>
|
||||||
|
<div class="m-t-5 font-13">
|
||||||
|
<span class="font-strong">Olivia Smith</span>
|
||||||
|
<a class="text-muted m-l-5" href="javascript:;">olivia.smith@gmail.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="p-r-10 font-13">Mar 26</div>
|
||||||
|
</div>
|
||||||
|
<div class="inbox-toolbar m-l-20">
|
||||||
|
<button class="btn btn-default btn-sm" data-action="reply" data-toggle="tooltip" data-original-title="Reply"><i class="fa fa-reply"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-trash-o"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Mark as important"><i class="fa fa-star-o"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Reply"><i class="fa fa-print"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mailbox-body">
|
||||||
|
<p>Hello admin. Can you help me?</p>
|
||||||
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
|
||||||
|
make a type specimen book. <strong>It has survived</strong> not only five centuries.</p>
|
||||||
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
|
||||||
|
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
|
||||||
|
scrambled it to make a type specimen book. It has survived not only five centuries.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mailbox-body">
|
||||||
|
<div class="d-flex justify-content-between m-b-10">
|
||||||
|
<span class="font-strong"><i class="fa fa-paperclip"></i> 3 attachments</span>
|
||||||
|
<button class="btn btn-default btn-sm" data-action="reply" data-toggle="tooltip" data-original-title="Download all"><i class="fa fa-download"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="mail-attachments d-flex">
|
||||||
|
<div class="card">
|
||||||
|
<div>
|
||||||
|
<img class="card-img-top file-image" src="./assets/img/blog/storm.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span>storm.jpg</span>
|
||||||
|
<a class="btn btn-default btn-xs float-right" href="javascript:;"><i class="fa fa-download"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div>
|
||||||
|
<img class="card-img-top file-image" src="./assets/img/blog/horse.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span>horse.jpg</span>
|
||||||
|
<a class="btn btn-default btn-xs float-right" href="javascript:;"><i class="fa fa-download"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="text-center">
|
||||||
|
<img class="card-img-top file-image" src="./assets/img/file.png" height="160px" />
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span>document.txt</span>
|
||||||
|
<a class="btn btn-default btn-xs float-right" href="javascript:;"><i class="fa fa-download"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.inbox-list li a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.inbox-list li a i {margin-right:5px}
|
||||||
|
.mailbox-header, .mailbox-body {padding: 15px}
|
||||||
|
.inbox-title {white-space: normal; margin: 8px 0; font-weight: 600;}
|
||||||
|
.mail-search {width:300px}
|
||||||
|
.inbox-toolbar {white-space: nowrap}
|
||||||
|
.table-inbox tr.unread {font-weight: 600;}
|
||||||
|
.table-inbox tr > td:first-child {padding-left:15px}
|
||||||
|
|
||||||
|
.mail-attachments .card{
|
||||||
|
width: 220px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.mail-search {width:100%}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-mail-view',
|
||||||
|
templateUrl: './mail-view.component.html',
|
||||||
|
})
|
||||||
|
export class MailViewComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,371 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Mailbox</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Mailbox</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-md-4">
|
||||||
|
<a class="btn btn-info btn-block" href="mail_compose.html"><i class="fa fa-edit"></i> Compose</a><br>
|
||||||
|
<h6 class="m-t-10 m-b-10">FOLDERS</h6>
|
||||||
|
<ul class="list-group list-group-divider inbox-list">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-inbox"></i> Inbox (6)
|
||||||
|
<span class="badge badge-warning badge-square pull-right">17</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-envelope-o"></i> Sent</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-star-o"></i> Important
|
||||||
|
<span class="badge badge-success badge-square pull-right">2</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-file-text-o"></i> Drafts</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-trash-o"></i> Trash</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h6 class="m-t-10 m-b-10">LABELS</h6>
|
||||||
|
<ul class="list-group list-group-divider inbox-list">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-success"></i> Support</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-warning"></i> Business</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-info"></i> Work</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-danger"></i> System</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<a href="javascript:;"><i class="fa fa-circle-o font-13 text-muted"></i> Social</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9 col-md-8">
|
||||||
|
<div class="ibox" id="mailbox-container">
|
||||||
|
<div class="mailbox-header">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<h5 class="d-none d-lg-block inbox-title"><i class="fa fa-envelope-o m-r-5"></i> Inbox (15)</h5>
|
||||||
|
<form class="mail-search" action="javascript:;">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control" type="text" placeholder="Search email">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button class="btn btn-info">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between inbox-toolbar p-t-20">
|
||||||
|
<div class="d-flex">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info check-single p-t-5 m-r-20">
|
||||||
|
<input type="checkbox" data-select="all">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
<div id="inbox-actions">
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Mark as read"><i class="fa fa-eye"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Mark as important"><i class="fa fa-star-o"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Reply"><i class="fa fa-reply"></i></button>
|
||||||
|
<button class="btn btn-default btn-sm" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-trash-o"></i></button>
|
||||||
|
</div>
|
||||||
|
<span class="counter-selected m-l-5" hidden="">Selected
|
||||||
|
<span class="font-strong text-warning counter-count">3</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="p-r-10 font-13">1-50 of 420</span>
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<button class="btn btn-default"><i class="fa fa-chevron-left"></i></button>
|
||||||
|
<button class="btn btn-default"><i class="fa fa-chevron-right"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mailbox clf">
|
||||||
|
<table class="table table-hover table-inbox" id="table-inbox">
|
||||||
|
<tbody class="rowlinkx" data-link="row">
|
||||||
|
<tr data-id="1">
|
||||||
|
<td class="check-cell rowlink-skip">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info check-single">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Emma Johnson</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Fusce suscipit semper erat, vel solo.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"><i class="fa fa-circle text-success"></i></td>
|
||||||
|
<td class="text-right">5.22 AM</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="unread" data-id="2">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Olivia Smith</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Mauris in sem at quam elementum sagittis vel.</td>
|
||||||
|
<td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
|
||||||
|
<td class="mail-label hidden-xs"><i class="fa fa-circle text-warning"></i></td>
|
||||||
|
<td class="text-right">4.10 AM</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="unread" data-id="3">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Noah Williams</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Neque porro quisquam est qui dolorem ipsum quia</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">1.20 AM</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="4">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Sophia Jones</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Lorem ipsum dolor sit.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">Jan 10</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="5">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Jacob Brown</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Nam vitae magna sollicitudin, fringilla neque sit.</td>
|
||||||
|
<td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">Dec 18</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="6">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">James Davis</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Donec eget diam quis lectus auctor.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">Dec 12</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="7">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Ava Wilson</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Duis hendrerit tellus tellus, ut lobortis quam.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"><i class="fa fa-circle text-success"></i></td>
|
||||||
|
<td class="text-right">Sep 7</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="unread" data-id="8">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Ethan Taylor</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Neque porro quisquam est qui dolorem ipsum quia dolor</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">Sep 1</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="9">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Emily Thomas</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Proin dictum sem felis, eu.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">July 8</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="10">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Noah Moore</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Phasellus massa velit, sodales non sollicitudin nec.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">July 6</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="11">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Mia Anderson</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Pellentesque rutrum auctor magna vel facilisis. Aliquam.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"><i class="fa fa-circle text-danger"></i></td>
|
||||||
|
<td class="text-right">June 15</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="12">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Amelia Harris</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">In ac imperdiet nulla. Proin interdum enim.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">June 8</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="13">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Sofia Jackson</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Morbi et lacus malesuada, cursus est non yet.</td>
|
||||||
|
<td class="hidden-xs"><i class="fa fa-paperclip"></i></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">April 27</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="unread" data-id="14">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Daniel Garcia</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Suspendisse potenti. Donec in vestibulum tortor. Duis.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">April 25</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-id="15">
|
||||||
|
<td class="check-cell">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input class="mail-check" type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="mail_view.html">Lucas Martin</a>
|
||||||
|
</td>
|
||||||
|
<td class="mail-message">Curabitur id ultrices erat. Praesent rhoncus augue.</td>
|
||||||
|
<td class="hidden-xs"></td>
|
||||||
|
<td class="mail-label hidden-xs"></td>
|
||||||
|
<td class="text-right">April 25</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<ul class="pagination justify-content-end m-t-0 m-r-10">
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="javascript:;" aria-label="Previous">
|
||||||
|
<span aria-hidden="true"><i class="fa fa-angle-left"></i></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item active">
|
||||||
|
<a class="page-link" href="javascript:;">1</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="javascript:;">2</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="javascript:;">3</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="javascript:;">4</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" href="javascript:;" aria-label="Next"><i class="fa fa-angle-right"></i></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.inbox-list li a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.inbox-list li a i {margin-right:5px}
|
||||||
|
.mailbox-header, .mailbox-body {padding: 15px}
|
||||||
|
.inbox-title {white-space: normal; margin: 8px 0; font-weight: 600;}
|
||||||
|
.mail-search {width:300px}
|
||||||
|
.inbox-toolbar {white-space: nowrap}
|
||||||
|
.table-inbox tr.unread {font-weight: 600;}
|
||||||
|
.table-inbox tr > td:first-child {padding-left:15px}
|
||||||
|
|
||||||
|
.mail-attachments .card{
|
||||||
|
width: 220px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.mail-search {width:100%}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-mailbox',
|
||||||
|
templateUrl: './mailbox.component.html',
|
||||||
|
})
|
||||||
|
export class MailboxComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/mailbox.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Vector maps</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Vector maps</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">World map</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="world_map" style="height: 300px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">USA map</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div id="usa_map" style="height: 300px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { MapsVectorComponent } from './maps-vector.component';
|
||||||
|
|
||||||
|
describe('MapsVectorComponent', () => {
|
||||||
|
let component: MapsVectorComponent;
|
||||||
|
let fixture: ComponentFixture<MapsVectorComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ MapsVectorComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(MapsVectorComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-maps-vector',
|
||||||
|
templateUrl: './maps-vector.component.html',
|
||||||
|
})
|
||||||
|
export class MapsVectorComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/jvectormap-demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,321 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Profile</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Profile</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-md-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-body text-center">
|
||||||
|
<div class="m-t-20">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u3.jpg" />
|
||||||
|
</div>
|
||||||
|
<h5 class="font-strong m-b-10 m-t-10">Frank Cruz</h5>
|
||||||
|
<div class="m-b-20 text-muted">Web Developer</div>
|
||||||
|
<div class="profile-social m-b-20">
|
||||||
|
<a href="javascript:;"><i class="fa fa-twitter"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-facebook"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-pinterest"></i></a>
|
||||||
|
<a href="javascript:;"><i class="fa fa-dribbble"></i></a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-info btn-rounded m-b-5"><i class="fa fa-plus"></i> Follow</button>
|
||||||
|
<button class="btn btn-default btn-rounded m-b-5">Message</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="row text-center m-b-20">
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="font-24 profile-stat-count">140</div>
|
||||||
|
<div class="text-muted">Followers</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="font-24 profile-stat-count">$780</div>
|
||||||
|
<div class="text-muted">Sales</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="font-24 profile-stat-count">15</div>
|
||||||
|
<div class="text-muted">Projects</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9 col-md-8">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-body">
|
||||||
|
<ul class="nav nav-tabs tabs-line">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" href="#tab-1" data-toggle="tab"><i class="ti-bar-chart"></i> Overview</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#tab-2" data-toggle="tab"><i class="ti-settings"></i> Settings</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#tab-3" data-toggle="tab"><i class="ti-announcement"></i> Feeds</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane fade show active" id="tab-1">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6" style="border-right: 1px solid #eee;">
|
||||||
|
<h5 class="text-info m-b-20 m-t-10"><i class="fa fa-bar-chart"></i> Month Statistics</h5>
|
||||||
|
<div class="h2 m-0">$12,400<sup>.60</sup></div>
|
||||||
|
<div><small>Month income</small></div>
|
||||||
|
<div class="m-t-20 m-b-20">
|
||||||
|
<div class="h4 m-0">120</div>
|
||||||
|
<div class="d-flex justify-content-between"><small>Month income</small>
|
||||||
|
<span class="text-success font-12"><i class="fa fa-level-up"></i> +24%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress m-t-5">
|
||||||
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width:50%; height:5px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="m-b-20">
|
||||||
|
<div class="h4 m-0">86</div>
|
||||||
|
<div class="d-flex justify-content-between"><small>Month income</small>
|
||||||
|
<span class="text-warning font-12"><i class="fa fa-level-down"></i> -12%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress m-t-5">
|
||||||
|
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:50%; height:5px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list-group list-group-full list-group-divider">
|
||||||
|
<li class="list-group-item">Projects
|
||||||
|
<span class="pull-right color-orange">15</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">Tasks
|
||||||
|
<span class="pull-right color-orange">148</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">Articles
|
||||||
|
<span class="pull-right color-orange">72</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">Friends
|
||||||
|
<span class="pull-right color-orange">44</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h5 class="text-info m-b-20 m-t-10"><i class="fa fa-user-plus"></i> Latest Followers</h5>
|
||||||
|
<ul class="media-list media-list-divider m-0">
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u1.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Jeanne Gonzalez <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u2.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Becky Brooks <small class="float-right text-muted">1 hrs ago</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u3.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Frank Cruz <small class="float-right text-muted">3 hrs ago</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u6.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Connor Perez <small class="float-right text-muted">Today</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text of the printing and typesetting.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<a class="media-img" href="javascript:;">
|
||||||
|
<img class="img-circle" src="./assets/img/users/u5.jpg" width="40" />
|
||||||
|
</a>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">Bob Gonzalez <small class="float-right text-muted">Today</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-info m-b-20 m-t-20"><i class="fa fa-shopping-basket"></i> Latest Orders</h4>
|
||||||
|
<table class="table table-striped table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Order ID</th>
|
||||||
|
<th>Customer</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th width="91px">Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>11</td>
|
||||||
|
<td>@Jack</td>
|
||||||
|
<td>$564.00</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-success">Shipped</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>12</td>
|
||||||
|
<td>@Amalia</td>
|
||||||
|
<td>$220.60</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-success">Shipped</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>13</td>
|
||||||
|
<td>@Emma</td>
|
||||||
|
<td>$760.00</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-default">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>14</td>
|
||||||
|
<td>@James</td>
|
||||||
|
<td>$87.60</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-warning">Expired</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>15</td>
|
||||||
|
<td>@Ava</td>
|
||||||
|
<td>$430.50</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-default">Pending</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>16</td>
|
||||||
|
<td>@Noah</td>
|
||||||
|
<td>$64.00</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge badge-success">Shipped</span>
|
||||||
|
</td>
|
||||||
|
<td>10/07/2017</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="tab-2">
|
||||||
|
<form action="javascript:void(0)">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 form-group">
|
||||||
|
<label>First Name</label>
|
||||||
|
<input class="form-control" type="text" placeholder="First Name">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 form-group">
|
||||||
|
<label>Last Name</label>
|
||||||
|
<input class="form-control" type="text" placeholder="First Name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email</label>
|
||||||
|
<input class="form-control" type="text" placeholder="Email address">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password</label>
|
||||||
|
<input class="form-control" type="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>Remamber me</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-default" type="button">Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="tab-3">
|
||||||
|
<h5 class="text-info m-b-20 m-t-20"><i class="fa fa-bullhorn"></i> Latest Feeds</h5>
|
||||||
|
<ul class="media-list media-list-divider m-0">
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-img"><i class="ti-user font-18 text-muted"></i></div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">New customer <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-img"><i class="ti-info-alt font-18 text-muted"></i></div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading text-warning">Server Warning <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-img"><i class="ti-announcement font-18 text-muted"></i></div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">7 new feedback <small class="float-right text-muted">Today</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-img"><i class="ti-check font-18 text-muted"></i></div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading text-success">Issue fixed <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-img"><i class="ti-shopping-cart font-18 text-muted"></i></div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading">7 New orders <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-img"><i class="ti-reload font-18 text-muted"></i></div>
|
||||||
|
<div class="media-body">
|
||||||
|
<div class="media-heading text-danger">Server warning <small class="float-right text-muted">12:05</small></div>
|
||||||
|
<div class="font-13">Lorem Ipsum is simply dummy text.</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style type="text/css">
|
||||||
|
.profile-social a {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 10px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.profile-social a:hover {
|
||||||
|
color: #485b6f;
|
||||||
|
}
|
||||||
|
.profile-stat-count {
|
||||||
|
font-size:22px
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ProfileComponent } from './profile.component';
|
||||||
|
|
||||||
|
describe('ProfileComponent', () => {
|
||||||
|
let component: ProfileComponent;
|
||||||
|
let fixture: ComponentFixture<ProfileComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ ProfileComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ProfileComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
||||||
|
import { ScriptLoaderService } from '../../_services/script-loader.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-profile',
|
||||||
|
templateUrl: './profile.component.html',
|
||||||
|
})
|
||||||
|
export class ProfileComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
constructor(private _script: ScriptLoaderService) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this._script.load('./assets/js/scripts/profile-demo.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,60 @@
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-size: 44px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 400px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
.content form {
|
||||||
|
padding: 15px 20px 20px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.login-header {margin:10px 0 20px 0;}
|
||||||
|
.login-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 56px;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #6bd6db;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #2CC4CB;
|
||||||
|
}
|
||||||
|
.login-header a{
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 0;
|
||||||
|
background-color: #c7cccf;
|
||||||
|
}
|
||||||
|
.login-header a.active {
|
||||||
|
background-color: #fff;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.login-title {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.social-auth-hr {
|
||||||
|
text-align: center;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.social-auth-hr span {
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.login-footer {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #ebedee;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
<div class="content">
|
||||||
|
<div class="brand">
|
||||||
|
<a class="link" routerLink="/index">AdminCAST</a>
|
||||||
|
</div>
|
||||||
|
<form id="register-form" action="javascript:;" method="post">
|
||||||
|
<h2 class="login-title">Sign Up</h2>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="text" name="first_name" placeholder="First Name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="text" name="last_name" placeholder="Last Name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="email" name="email" placeholder="Email" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" id="password" type="password" name="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control" type="password" name="password_confirmation" placeholder="Confirm Password">
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label class="ui-checkbox ui-checkbox-info">
|
||||||
|
<input type="checkbox" name="agree">
|
||||||
|
<span class="input-span"></span>I agree the terms and policy</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-info btn-block" type="submit">Sign up</button>
|
||||||
|
</div>
|
||||||
|
<div class="social-auth-hr">
|
||||||
|
<span>Or Sign up with</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-center social-auth m-b-20">
|
||||||
|
<a class="btn btn-social-icon btn-twitter m-r-5" href="javascript:;"><i class="fa fa-twitter"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-facebook m-r-5" href="javascript:;"><i class="fa fa-facebook"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-google m-r-5" href="javascript:;"><i class="fa fa-google-plus"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-linkedin m-r-5" href="javascript:;"><i class="fa fa-linkedin"></i></a>
|
||||||
|
<a class="btn btn-social-icon btn-vk" href="javascript:;"><i class="fa fa-vk"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">Already a member?
|
||||||
|
<a class="color-blue" routerLink="/login">Login here</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
declare var $:any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-register',
|
||||||
|
templateUrl: './register.component.html',
|
||||||
|
styleUrls: ['./register.component.css'],
|
||||||
|
})
|
||||||
|
export class RegisterComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
$('body').addClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
$('#register-form').validate({
|
||||||
|
errorClass: "help-block",
|
||||||
|
rules: {
|
||||||
|
first_name: {
|
||||||
|
required: true,
|
||||||
|
minlength: 2
|
||||||
|
},
|
||||||
|
last_name: {
|
||||||
|
required: true,
|
||||||
|
minlength: 2
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
email: true
|
||||||
|
},
|
||||||
|
'password': {
|
||||||
|
required: true,
|
||||||
|
confirmed: true
|
||||||
|
},
|
||||||
|
password_confirmation: {
|
||||||
|
equalTo: 'password'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
highlight: function(e) {
|
||||||
|
$(e).closest(".form-group").addClass("has-error")
|
||||||
|
},
|
||||||
|
unhighlight: function(e) {
|
||||||
|
$(e).closest(".form-group").removeClass("has-error")
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
$('body').removeClass('empty-layout bg-silver-300');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,439 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Basic Tables</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Basic Tables</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Basic Table</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Bordered Table</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Gray head</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table">
|
||||||
|
<thead class="thead-default">
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Gray head</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<thead class="thead-default">
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Striped rows</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Hover rows</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Responsive Table</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="50px"></th>
|
||||||
|
<th>Product</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th>Data</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>iphone case</td>
|
||||||
|
<td>$1200</td>
|
||||||
|
<td>33%</td>
|
||||||
|
<td>02/08/2017</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-default btn-xs m-r-5" data-toggle="tooltip" data-original-title="Edit"><i class="fa fa-pencil font-14"></i></button>
|
||||||
|
<button class="btn btn-default btn-xs" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-trash font-14"></i></button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>Car covers</td>
|
||||||
|
<td>$3280</td>
|
||||||
|
<td>42%</td>
|
||||||
|
<td>08/10/2017</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-default btn-xs m-r-5" data-toggle="tooltip" data-original-title="Edit"><i class="fa fa-pencil font-14"></i></button>
|
||||||
|
<button class="btn btn-default btn-xs" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-trash font-14"></i></button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label class="ui-checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="input-span"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>Compressors</td>
|
||||||
|
<td>$7400</td>
|
||||||
|
<td>56%</td>
|
||||||
|
<td>14/11/2017</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-default btn-xs m-r-5" data-toggle="tooltip" data-original-title="Edit"><i class="fa fa-pencil font-14"></i></button>
|
||||||
|
<button class="btn btn-default btn-xs" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-trash font-14"></i></button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Contextual classes</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<caption>Optional table caption.</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="active">
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>02/08/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>04/10/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="info">
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>08/11/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>04/10/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="success">
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>08/11/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>04/10/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="warning">
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>08/11/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>04/10/2017</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="danger">
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>08/11/2017</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Condensed Table</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<table class="table table-condensed">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>First Name</th>
|
||||||
|
<th>Last Name</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td><i class="fa fa-check text-success"></i></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td><i class="fa fa-check text-success"></i></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td><i class="fa fa-warning text-warning"></i></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TablesComponent } from './tables.component';
|
||||||
|
|
||||||
|
describe('TablesComponent', () => {
|
||||||
|
let component: TablesComponent;
|
||||||
|
let fixture: ComponentFixture<TablesComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ TablesComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TablesComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-tables',
|
||||||
|
templateUrl: './tables.component.html',
|
||||||
|
})
|
||||||
|
export class TablesComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,91 @@
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="page-title">Alerts & Tooltips</h1>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item">
|
||||||
|
<a href="index.html"><i class="la la-home font-20"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class="breadcrumb-item">Alerts & Tooltips</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="page-content fade-in-up">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Alerts</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="fullscreen-link"><i class="fa fa-expand"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<div class="alert alert-success"><strong>Success!</strong> You successfully read this important alert message.
|
||||||
|
<a class="alert-link" href="javascript:;">Alert link</a>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info"><strong>Info!</strong> This alert needs your attention, but it's not super important.
|
||||||
|
<a class="alert-link" href="javascript:;">Alert link</a>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning"><strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||||
|
<a class="alert-link" href="javascript:;">Alert link</a>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger"><strong>Danger!</strong> Change a few things up and try submitting again.
|
||||||
|
<a class="alert-link" href="javascript:;">Alert link</a>
|
||||||
|
</div>
|
||||||
|
<h5 class="m-t-10 m-b-10">Dismissing</h5>
|
||||||
|
<div class="alert alert-success alert-dismissable fade show">
|
||||||
|
<button class="close" data-dismiss="alert" aria-label="Close">×</button><strong>Success!</strong> You successfully read this important alert message.</div>
|
||||||
|
<div class="alert alert-warning alert-dismissable fade show">
|
||||||
|
<button class="close" data-dismiss="alert" aria-label="Close">×</button><strong>Warning!</strong> Better check yourself, you're not looking too good.</div>
|
||||||
|
<h5 class="m-t-10 m-b-10">Bordered</h5>
|
||||||
|
<div class="alert alert-danger alert-bordered"><strong>WOW!</strong> Change a few things up and try submitting again.</div>
|
||||||
|
<div class="alert alert-success alert-bordered"><strong>WOW!</strong> Change a few things up and try submitting again.</div>
|
||||||
|
<div class="alert alert-warning alert-bordered-right"><strong>WOW!</strong> Change a few things up and try submitting again.</div>
|
||||||
|
<h5 class="m-t-10 m-b-10">Additional content</h5>
|
||||||
|
<div class="alert alert-info alert-dismissable fade show">
|
||||||
|
<button class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<h4>Hello!</h4>
|
||||||
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||||
|
<p>
|
||||||
|
<button class="btn btn-success">i am agree</button>
|
||||||
|
<button class="btn btn-warning">Cancel</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-head">
|
||||||
|
<div class="ibox-title">Tooltips & Popovers</div>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="ibox-collapse"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
<a class="dropdown-item">option 1</a>
|
||||||
|
<a class="dropdown-item">option 2</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-body">
|
||||||
|
<button class="btn btn-default m-r-5 m-b-5" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
|
||||||
|
<button class="btn btn-default m-r-5 m-b-5" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
|
||||||
|
<button class="btn btn-default m-r-5 m-b-5" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
||||||
|
<button class="btn btn-default m-r-5 m-b-5" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
|
||||||
|
<button class="btn btn-default m-b-5" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">With HTML</button><br><br>
|
||||||
|
<button class="btn btn-default m-r-5 m-b-5" data-toggle="tooltip" data-placement="top" data-trigger="click" title="Clickable Tooltip">Click to tooltip</button>
|
||||||
|
<button class="btn btn-default m-b-5" data-toggle="tooltip" data-placement="top" data-html="true" title="<img src='../assets/img/demo/users/u1.jpg' width='35px'>">With Icons</button>
|
||||||
|
<h5 class="m-t-10 m-b-10">Popovers</h5>
|
||||||
|
<button class="btn btn-info m-r-5 m-b-5" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Hoverable Popover</button>
|
||||||
|
<button class="btn btn-info m-r-5 m-b-5" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Dismissable Popover</button>
|
||||||
|
<button class="btn btn-info m-b-5" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Clickable Popover</button><br><br>
|
||||||
|
<button class="btn btn-info m-r-5 m-b-5" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
|
||||||
|
<button class="btn btn-info m-r-5 m-b-5" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
|
||||||
|
<button class="btn btn-info m-r-5 m-b-5" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
|
||||||
|
<button class="btn btn-info m-b-5" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
|
||||||
|
</div>
|
||||||
|
</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