Initial commit

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vsicons.presets.angular": true
+}

package.json

@@ -21,12 +21,14 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "core-js": "^2.4.1",
+    "normalize.css": "^6.0.0",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "1.0.2",
     "@angular/compiler-cli": "^4.0.0",
+    "@angularclass/hmr": "^1.2.2",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",
@@ -35,9 +37,9 @@
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",

src/app/app.component.html

@@ -1,3 +1,6 @@
-<h1>
-  {{title}}
-</h1>
+<header class="header"></header>
+<main>
+  <router-outlet></router-outlet>
+</main>
+<footer>
+</footer>

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app works!';

src/app/app.module.ts

@@ -1,20 +1,51 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, ApplicationRef } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
+import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
+
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { HeaderComponent } from './layout/header/header.component';
+
+import { routing } from './app.routing';
+
+import 'normalize.css';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    routing,
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+  constructor(public appRef: ApplicationRef) {}
+
+  hmrOnInit(store) {
+    console.log('HMR store', store);
+  }
+
+  hmrOnDestroy(store) {
+    const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
+    // recreate elements
+    store.disposeOldHosts = createNewHosts(cmpLocation);
+    // remove styles
+    removeNgStyles();
+  }
+
+  hmrAfterDestroy(store) {
+    // display new elements
+    store.disposeOldHosts();
+    delete store.disposeOldHosts;
+  }
+}

src/app/app.routing.ts

@@ -0,0 +1,9 @@
+import { RouterModule, Routes } from '@angular/router';
+
+import { HomeComponent } from './home/home.component';
+
+const routes: Routes = [
+  { path: '', component: HomeComponent },
+];
+
+export const routing = RouterModule.forRoot(routes);

src/app/home/home.component.e2e-spec.js

@@ -0,0 +1,13 @@
+describe('Home', function () {
+
+  beforeEach(function () {
+    browser.get('/');
+  });
+
+  it('should have <my-home>', function () {
+    var home = element(by.css('my-app my-home'));
+    expect(home.isPresent()).toEqual(true);
+    expect(home.getText()).toEqual("Home Works!");
+  });
+
+});

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+// This shows a different way of testing a component, check about for a simpler one
+import { Component } from '@angular/core';
+
+import { TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('Home Component', () => {
+  const html = '<my-home></my-home>';
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [HomeComponent, TestComponent]});
+    TestBed.overrideComponent(TestComponent, { set: { template: html }});
+  });
+
+  it('should ...', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.children[0].textContent).toContain('Home Works!');
+  });
+
+});
+
+@Component({selector: 'my-test', template: ''})
+class TestComponent { }

src/app/home/home.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'my-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() {
+    // Do stuff
+  }
+
+  ngOnInit() {
+    console.log('Hello Home');
+  }
+
+}

src/app/layout/header/header.component.html

@@ -0,0 +1,32 @@
+<a
+  [routerLink]="['']"
+  class="logo"
+>
+  <img
+    class="logo__image"
+    src="/img/logo.png"
+    alt="Клуб Туристов"
+  />
+</a>
+<ul class="top-nav">
+  <li class="top-nav__item">
+    <ul class="top-nav__submenu">
+      <li class="top-nav__sub-item">
+        <a class="top-nav__sub-link"[routerLink]="['']">Зимовий відпочинок</a>
+      </li>
+      <li class="top-nav__sub-item">
+        <a class="top-nav__sub-link"[routerLink]="['']">Карпати</a>
+      </li>
+    </ul>
+    <a
+      [routerLink]="['']"
+      class="top-nav__link"
+    >
+      Наші тури
+    </a>
+  </li>
+</ul>
+<ul class="header__contacts">
+  <li class="header__phone-number">(093)86-99-916</li>
+  <li class="header__phone-number">(093)86-99-916</li>
+</ul>

src/app/layout/header/header.component.scss

@@ -0,0 +1,64 @@
+@import "../../../style/_colors";
+@import "../../../style/_variables";
+
+:host {
+  background-color: $header-bg-color;
+  box-shadow: inset  0 -1px 0 $header-border-color;
+  display: grid;
+  height: 65px;
+  justify-content: space-between;
+  width: 100vw;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.top-nav {
+  align-items: stretch;
+  display: flex;
+  justify-content: space-between;
+}
+
+.top-nav__item {
+  align-items: center;
+  color: $top-nav-link-color;
+  display: flex;
+  text-transform: capitalize;
+  position: relative;
+  white-space: nowrap;
+
+  &:hover {
+    & > .top-nav__submenu {
+      display: flex;
+    }
+  }
+}
+
+.top-nav__link,
+.top-nav__sub-link {
+  color: $top-nav-link-color;
+}
+
+.top-nav__submenu {
+  background-color: $nav-submenu-bg-color;
+  // display: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: -$top-submenu-padding;
+  padding: $top-submenu-padding 20px $top-submenu-padding $top-submenu-padding;
+  position: absolute;
+  top: 100%;
+}
+
+.top-nav__sub-item {
+  white-space: nowrap;
+}
+

src/app/layout/header/header.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+  constructor() {
+    // Do stuff
+  }
+
+  ngOnInit() {
+    console.log('Hello Header');
+  }
+}

src/style/_colors.scss

@@ -0,0 +1,4 @@
+$header-bg-color: rgba(27, 29, 42, .8);
+$header-border-color: #c0a110;
+$top-nav-link-color: white;
+$nav-submenu-bg-color: rgba(0, 0, 0, .4);

src/style/_variables.scss

@@ -0,0 +1 @@
+$top-submenu-padding: 10px;

src/styles.scss

@@ -0,0 +1,7 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  min-height: 100vh;
+  overflow: hidden;
+  padding: 0;
+}