pages/auth layout

This commit is contained in:
insanity 2018-04-06 17:11:24 +09:00
parent dc34ae0d0e
commit da66377a96
15 changed files with 201 additions and 88 deletions

View File

@ -1,25 +1,15 @@
// import { NgModule } from '@angular/core';
// import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
// import { AuthGuard } from './commons/guard/auth.guard';
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AuthGuard } from './commons/guard/auth.guard';
// const routes: Routes = [
// { path: '', loadChildren: './pages/pages.module#PagesModule' },
// { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
// { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' },
// ];
// @NgModule({
// imports: [RouterModule.forRoot(routes, {useHash: true, preloadingStrategy: PreloadAllModules})],
// exports: [RouterModule],
// })
// export class AppRoutingModule { }
import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
export const routes: Routes = [
const routes: Routes = [
{ path: '', loadChildren: './pages/pages.module#PagesModule' },
{ path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
// { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' },
];
export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true, preloadingStrategy: PreloadAllModules})],
exports: [RouterModule],
})
export class AppRoutingModule { }

View File

@ -1,7 +1,10 @@
<div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" (click)="onLayoutClick()">
<div *ngIf="isAuthRouteActivated();else layout">
<router-outlet></router-outlet>
</div>
<ng-template #layout>
<div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" (click)="onLayoutClick()">
<div #layoutContainer class="layout-container"
[ngClass]="{'menu-layout-static': !isOverlay(),
<div #layoutContainer class="layout-container" [ngClass]="{'menu-layout-static': !isOverlay(),
'menu-layout-overlay': isOverlay(),
'layout-menu-overlay-active': overlayMenuActive,
'menu-layout-horizontal': isHorizontal(),
@ -9,28 +12,28 @@
'layout-menu-static-inactive': staticMenuDesktopInactive,
'layout-menu-static-active': staticMenuMobileActive}">
<of-topbar></of-topbar>
<of-topbar></of-topbar>
<div class="layout-menu" [ngClass]="{'layout-menu-dark':darkMenu}" (click)="onMenuClick($event)">
<p-scrollPanel #scrollPanel [style]="{height: '100%'}">
<of-inline-profile *ngIf="profileMode=='inline'&&!isHorizontal()"></of-inline-profile>
<of-menu [reset]="resetMenu"></of-menu>
</p-scrollPanel>
</div>
<div class="layout-main">
<of-breadcrumb></of-breadcrumb>
<div class="layout-content">
<router-outlet></router-outlet>
<of-footer></of-footer>
<div class="layout-menu" [ngClass]="{'layout-menu-dark':darkMenu}" (click)="onMenuClick($event)">
<p-scrollPanel #scrollPanel [style]="{height: '100%'}">
<of-inline-profile *ngIf="profileMode=='inline'&&!isHorizontal()"></of-inline-profile>
<of-menu [reset]="resetMenu"></of-menu>
</p-scrollPanel>
</div>
<div class="layout-main">
<of-breadcrumb></of-breadcrumb>
<div class="layout-content">
<router-outlet></router-outlet>
<of-footer></of-footer>
</div>
</div>
<of-rightpanel></of-rightpanel>
<div class="layout-mask"></div>
</div>
<of-rightpanel></of-rightpanel>
<div class="layout-mask"></div>
</div>
</div>
</ng-template>

View File

@ -1,39 +0,0 @@
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { AppTopbarComponent } from './app.topbar.component';
import { AppRightpanelComponent} from './app.rightpanel.component';
import { AppInlineProfileComponent } from './app.profile.component';
import { AppFooterComponent } from './app.footer.component';
import { AppBreadcrumbComponent } from './app.breadcrumb.component';
import { AppMenuComponent, AppSubMenuComponent } from './app.menu.component';
import { BreadcrumbService } from './breadcrumb.service';
import {ScrollPanel} from 'primeng/primeng';
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ RouterTestingModule ],
declarations: [ AppComponent,
AppTopbarComponent,
AppMenuComponent,
AppSubMenuComponent,
AppFooterComponent,
AppBreadcrumbComponent,
AppInlineProfileComponent,
AppRightpanelComponent,
ScrollPanel
],
providers: [BreadcrumbService]
});
TestBed.compileComponents();
});
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});

View File

@ -1,5 +1,6 @@
import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
import { ScrollPanel } from 'primeng/primeng';
import { Router } from '@angular/router';
enum MenuOrientation {
STATIC,
@ -59,9 +60,13 @@ export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
rippleMouseDownListener: any;
constructor(public renderer: Renderer, public zone: NgZone) { }
constructor(public renderer: Renderer, public zone: NgZone, private router: Router) { }
ngOnInit() {
if (this.isAuthRouteActivated()) {
console.log('auth?');
return;
}
this.zone.runOutsideAngular(() => { this.bindRipple(); });
}
@ -310,4 +315,8 @@ export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
this.unbindRipple();
}
isAuthRouteActivated() {
return this.router.url.indexOf('/auth') > -1;
}
}

View File

@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePageComponent } from './home-page.component';
const routes: Routes = [
{
path: '',
component: HomePageComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }

View File

@ -0,0 +1,3 @@
<p>
Home works!
</p>

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'of-pages-home',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomePageComponent } from './home-page.component';
import { HomePageRoutingModule } from './home-page-routing.module';
@NgModule({
imports: [
CommonModule,
HomePageRoutingModule,
],
declarations: [HomePageComponent]
})
export class HomePageModule { }

View File

@ -8,8 +8,8 @@ const routes: Routes = [
path: '',
component: PagesComponent,
children: [
// { path: '', redirectTo: 'home' },
// { path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
{ path: '', redirectTo: 'home' },
{ path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
// { path: 'probes', loadChildren: './probes/probes-page.module#ProbesPageModule' },
// { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule' },
// { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' },

View File

@ -1 +1 @@
<div>pages-component</div>
<router-outlet></router-outlet>

View File

@ -0,0 +1,19 @@
{
"App": {
"Title": "overFlow",
"Subtitle": "It's a small world",
"Home": "Home",
"Infra": "Infra",
"Map": "Map",
"Sensors": "Sensors",
"SensorSetting": "SensorSetting",
"Probes": "Probes",
"Monitor": "Monitor",
"Overview": "Overview",
"Dashboards": "Dashboards",
"Alert": "Alert",
"Report": "Report",
"Log": "Log",
"Setting":"Setting"
}
}

View File

@ -0,0 +1,19 @@
{
"App": {
"Title": "오버플로우",
"Subtitle": "It's a small world",
"Home": "홈",
"Infra": "인프라",
"Map": "맵",
"Sensors": "센서",
"SensorSetting": "센서설정",
"Probes": "프로브",
"Monitor": "모니터",
"Overview": "오버뷰",
"Dashboards": "대시보드",
"Alert": "알림",
"Report": "리포트",
"Log": "기록",
"Setting":"설정"
}
}

View File

@ -1 +1,65 @@
<div>signin</div>
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>overFlow</title>
<!-- Layout CSS -->
<link rel="stylesheet" type="text/css" href="assets/theme/theme-indigo.css">
<link rel="stylesheet" type="text/css" href="assets/layout/css/layout-indigo.css">
<link rel="stylesheet" type="text/css" href="assets/layout/css/primeng.min.css">
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('input').on('blur', function(e) {
var el = $(this);
if(el.val() != '')
el.addClass('ui-state-filled');
else
el.removeClass('ui-state-filled');
});
});
</script>
</head>
<!-- 3. Display the application -->
<body class="login-body">
<div class="card login-panel ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<img src="assets/layout/images/logo-ultima.svg">
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
<label>Username</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
<label>Password</label>
</span>
</div>
<div class="ui-g-12">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
<span class="ui-button-text ui-c">Sign In</span>
</button>
<button type="button" class="secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-help"></span>
<span class="ui-button-text ui-c">Sign In</span>
</button>
</div>
</div>
</div>
</body>
</html>