pages/auth layout

src/app/app-routing.module.ts

@@ -1,25 +1,15 @@
-// import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
-// import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
-// import { AuthGuard } from './commons/guard/auth.guard';
+import { AuthGuard } from './commons/guard/auth.guard';
 
-// 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' },
-// ];
-
-// @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 = [
   { 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 { }

src/app/app.component.html

@@ -1,7 +1,10 @@
+<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"
+        <div #layoutContainer class="layout-container" [ngClass]="{'menu-layout-static': !isOverlay(),
-            [ngClass]="{'menu-layout-static': !isOverlay(),
             'menu-layout-overlay': isOverlay(),
             'layout-menu-overlay-active': overlayMenuActive,
             'menu-layout-horizontal': isHorizontal(),
@@ -32,5 +35,5 @@
 
             <div class="layout-mask"></div>
         </div>
-
     </div>
+</ng-template>

src/app/app.component.spec.ts

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

src/app/app.component.ts

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

src/app/pages/home/home-page-routing.module.ts

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

src/app/pages/home/home-page.component.html

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

src/app/pages/home/home-page.component.ts

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

src/app/pages/home/home-page.module.ts

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

src/app/pages/pages-routing.module.ts

@@ -8,8 +8,8 @@ const routes: Routes = [
     path: '',
     component: PagesComponent,
     children: [
-      // { path: '', redirectTo: 'home' },
+      { path: '', redirectTo: 'home' },
-      // { path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
+      { 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' },

src/app/pages/pages.component.html

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

src/assets/translations/of-en.json

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

src/assets/translations/of-kr.json

@@ -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":"설정"
+    }
+}

src/packages/member/component/signin/signin.component.html

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