#6 Carcas (#25)

src/package.json

@@ -35,13 +35,17 @@
     "@angular/compiler-cli": "~11.0.1",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "4.3.0",
-    "@typescript-eslint/parser": "4.3.0",
-    "eslint": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
+    "eslint": "^7.15.0",
+    "eslint-config-rallycoding": "^3.2.0",
+    "eslint-config-standard": "^16.0.2",
     "eslint-plugin-angular": "^4.0.1",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsdoc": "30.7.6",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-promise": "^4.2.1",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.1.0",

src/src/app/app.component.css

@@ -0,0 +1,31 @@
+header {
+  grid-area: header;
+  background: orange;
+  padding: 10px;
+}
+
+main {
+  grid-area: main;
+  background: yellow;
+  padding: 10px;
+}
+
+aside {
+  grid-area: right-sidebar;
+  background: blue;
+  padding: 10px;
+}
+
+.grid {
+  min-width: auto;
+  max-width: auto;
+  margin: 0 auto 1px;
+  min-height: 700px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: 100px 600px 100px / 200px 1fr 200px;
+  grid-template-areas:
+    'header header header'
+    'main main right-sidebar'
+    'footer footer footer';
+}

src/src/app/app.component.html

@@ -1 +1,16 @@
-<app-date-slider (onSliderChange)="outputSliderRange($event)"></app-date-slider>
+<div class="grid">
+  <header>
+    <app-header-panel>header</app-header-panel>
+  </header>
+
+  <main>
+    <app-main>main</app-main>
+    <app-date-slider
+      (onSliderChange)="outputSliderRange($event)"
+    ></app-date-slider>
+  </main>
+
+  <aside class="sidebar">
+    <app-right-sidebar>right-sidebar</app-right-sidebar>
+  </aside>
+</div>

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

@@ -1,6 +1,7 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+/* eslint-disable no-undef */
+import { TestBed } from '@angular/core/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { AppComponent } from './app.component'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
@@ -10,26 +11,27 @@ describe('AppComponent', () => {
       ],
       declarations: [
         AppComponent
-      ],
-    }).compileComponents();
-  });
+      ]
+    }).compileComponents()
+  })
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
+    const fixture = TestBed.createComponent(AppComponent)
+    const app = fixture.componentInstance
+    // eslint-disable-next-line no-undef
+    expect(app).toBeTruthy()
+  })
 
-  it(`should have as title 'City-past'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('City-past');
-  });
+  it('should have as title \'City-past\'', () => {
+    const fixture = TestBed.createComponent(AppComponent)
+    const app = fixture.componentInstance
+    expect(app.title).toEqual('City-past')
+  })
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('City-past app is running!');
-  });
-});
+    const fixture = TestBed.createComponent(AppComponent)
+    fixture.detectChanges()
+    const compiled = fixture.nativeElement
+    expect(compiled.querySelector('.content span').textContent).toContain('City-past app is running!')
+  })
+})

src/src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ISlider } from './date-slider/slider';
+import { Component } from '@angular/core'
+import { ISlider } from './date-slider/slider'
 
 @Component({
   selector: 'app-root',
@@ -9,8 +9,8 @@ import { ISlider } from './date-slider/slider';
 export class AppComponent {
   title = 'City-past';
 
-  outputSliderRange(range: ISlider): void {
-    const datesRange = `Start: ${range.startDate.getFullYear()} End: ${range.endDate.getFullYear()}`;
-    console.log(datesRange);
+  outputSliderRange (range: ISlider): void {
+    const datesRange = `Start: ${range.startDate.getFullYear()} End: ${range.endDate.getFullYear()}`
+    console.log(datesRange)
   }
 }

src/src/app/app.module.ts

@@ -1,19 +1,29 @@
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import { BrowserModule } from '@angular/platform-browser';
-import { DateSliderComponent } from './date-slider/date-slider.component';
-import { NgModule } from '@angular/core';
-import { NgxSliderModule } from '@angular-slider/ngx-slider';
+import { AppComponent } from './app.component'
+import { AppRoutingModule } from './app-routing.module'
+import { BrowserModule } from '@angular/platform-browser'
+import { DateSliderComponent } from './date-slider/date-slider.component'
+import { NgModule } from '@angular/core'
+import { NgxSliderModule } from '@angular-slider/ngx-slider'
+import { HeaderPanelComponent } from './header-panel/header-panel.component'
+import { FooterComponent } from './footer/footer.component'
+import { MainComponent } from './main/main.component'
+import { RightSidebarComponent } from './right-sidebar/right-sidebar.component'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
 @NgModule({
   declarations: [
     AppComponent,
-    DateSliderComponent,
+    HeaderPanelComponent,
+    FooterComponent,
+    MainComponent,
+    RightSidebarComponent,
+    DateSliderComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgxSliderModule,
+    BrowserAnimationsModule,
+    NgxSliderModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/src/app/footer/footer.component.html

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

src/src/app/footer/footer.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FooterComponent {}

src/src/app/header-panel/header-panel.component.html

@@ -0,0 +1 @@
+<p>header-panel works!</p>

src/src/app/header-panel/header-panel.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header-panel',
+  templateUrl: './header-panel.component.html',
+  styleUrls: ['./header-panel.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderPanelComponent {}

src/src/app/main/main.component.html

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

src/src/app/main/main.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MainComponent {
+}

src/src/app/right-sidebar/right-sidebar.component.html

@@ -0,0 +1 @@
+<p>right-sidebar works!</p>

src/src/app/right-sidebar/right-sidebar.component.ts

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

src/src/index.html

@@ -6,23 +6,12 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="https://api-maps.yandex.ru/2.1/?apikey=ca8ac6ea-745f-498f-a288-a00cafa50aac&load=package.full&lang=ru_RU"
   type="text/javascript"> </script>
-  <script type="text/javascript">
-    ymaps.ready(function(){
-        // Указывается идентификатор HTML-элемента.
-        var ptz_map = new ymaps.Map("first_map", {
-            center: [61.78, 34.35],
-            zoom: 13
-        });
-    });
-</script>
 </head>
-<body>
-<p>Карта Петрозаводска</p>
-<center>
-<div id="first_map" style="width:800px; height:800px;"></div>
-</center>
-<app-root></app-root>
+<body class="mat-typography">
+  <app-root>  </app-root>
 </body>
-</html>
+</html>

src/src/styles.css

@@ -1 +1,2 @@
-/* You can add global styles to this file, and also import other style files */
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }