2022-12-24

This commit is contained in:
yurecnt 2022-12-24 21:12:23 +05:00
parent 6518ddf75d
commit 71f39486f4
6077 changed files with 1027117 additions and 1014 deletions

BIN
api/admin/AdminCAST.zip Normal file

Binary file not shown.

View File

@ -0,0 +1,5 @@
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,11
[InternetShortcut]
URL=https://bootstraptema.ru/
IDList=

View File

@ -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).

View File

@ -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!');
});
});

View File

@ -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();
}
}

View File

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

View File

@ -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
});
};

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -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 } }));
}
};

View File

@ -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();
}));
});

View File

@ -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'});
}
});
}
}

View File

@ -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 { }

View File

@ -0,0 +1,7 @@
.preloader-backdrop {
background-color: transparent;
}
.page-preloader {
background-color: #fff;
box-shadow: 0 5px 20px #d6dee4;
}

View File

@ -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 -->

View File

@ -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!');
}));
});

View File

@ -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() {}
}

View File

@ -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 { }

View File

@ -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);
}
}
}
}

View File

@ -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>

View File

@ -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() {
}
}

View File

@ -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>

View File

@ -0,0 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: '[app-footer]',
templateUrl: './app-footer.component.html'
})
export class AppFooter {}

View File

@ -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>

View File

@ -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() {
}
}

View File

@ -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 &amp; Tooltips</a>
</li>
<li>
<a routerLink="/ui/badges_progress" routerLinkActive="active">Badges &amp; 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>

View File

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

View File

@ -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-->

View File

@ -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();
}
}

View File

@ -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 {
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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,
});
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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() {
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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")
},
});
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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});
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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() {
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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});
}
}

View File

@ -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>

View File

@ -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() {}
}

View File

@ -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>

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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');
}
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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() {
}
}

View File

@ -0,0 +1,91 @@
<div class="page-heading">
<h1 class="page-title">Alerts &amp; 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 &amp; 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 &amp; 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="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">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="&lt;img src='../assets/img/demo/users/u1.jpg' width='35px'&gt;">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