init

angular.json

@@ -23,6 +23,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": [],
@@ -80,6 +81,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": [],

package-lock.json

@@ -129,6 +129,23 @@
         "tslib": "1.10.0"
       }
     },
+    "@angular/cdk": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.3.7.tgz",
+      "integrity": "sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==",
+      "requires": {
+        "parse5": "5.1.1",
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.9.tgz",
@@ -482,6 +499,14 @@
       "integrity": "sha512-a/Bqf19+YhqACxQOkpYB0HK/zjHqDrZVUyBtdiX17njuvlWgD4wvdtdxae//ZeIVHNDJS+G5Gelbe+Yzon+VGA==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-7.3.7.tgz",
+      "integrity": "sha512-Eq+7frkeNGkLOfEtmkmJgR+AgoWajOipXZWWfCSamNfpCcPof82DwvGOpAmgGni9FuN2XFQdqP5MoaffQzIvUA==",
+      "requires": {
+        "tslib": "1.10.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "7.2.16",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.2.16.tgz",
@@ -6545,6 +6570,14 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ng-animate": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/ng-animate/-/ng-animate-0.3.4.tgz",
+      "integrity": "sha512-akMSySNAAe4H7f+XhjDvRnxa1eg+6zvl0DwVFXYpFDiGClPGlC93hT1+EXq0z9rq2U8IpBFh2FkSUT/FRIeROw==",
+      "requires": {
+        "tslib": "1.10.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -12,14 +12,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~7.2.0",
+    "@angular/cdk": "~7.3.7",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/forms": "~7.2.0",
+    "@angular/material": "^7.3.7",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
+    "ng-animate": "^0.3.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"

src/app/app.component.css

@@ -0,0 +1,16 @@
+.page{
+  width:90%;
+  max-width: 1200px;
+  margin:auto;
+  display:flex;
+  flex-direction: column;
+}
+.bottom{
+  display:flex;
+  flex-direction: row;
+}
+.right{
+  width:20%;
+  min-width:300px;
+}
+.left{width:100%;}

src/app/app.component.html

@@ -1,20 +1,18 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<section class="page">
-<div style="text-align:center">
+  <section class="top">
-  <h1>
+<header><h1>
-    Welcome to {{ title }}!
+Anonimowy mikroblog
-  </h1>
+</h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</header>
-</div>
+  </section>
-<h2>Here are some links to help you start: </h2>
+  <section class="bottom">
-<ul>
+  <section class="left">
-  <li>
+<router-outlet></router-outlet>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </section>
-  </li>
+  <section class="right">
-  <li>
+    <app-right-panel>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+    </app-right-panel>
+  </section>
+  </section>
+</section>

src/app/app.module.ts

@@ -2,13 +2,50 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { MainPageComponent } from './main-page/main-page.component';
+import { MainPagePostComponent } from './main-page-post/main-page-post.component';
+import { SinglePostComponent } from './single-post/single-post.component';
+import { CommentComponent } from './comment/comment.component';
+import { MenuComponent } from './menu/menu.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {RouterModule, Routes} from '@angular/router';
+import {MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRippleModule} from '@angular/material';
+import { RightPanelComponent } from './right-panel/right-panel.component';
+import {FormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+
+const appRoutes: Routes = [
+  { path: '', component: MainPageComponent },
+  {path: 'post/:id', component: SinglePostComponent},
+  // { path: 'hero/:id',      component: HeroDetailComponent },
+
+  // { path: '**', component: PageNotFoundComponent }
+];
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MainPageComponent,
+    MainPagePostComponent,
+    SinglePostComponent,
+    CommentComponent,
+    MenuComponent,
+    RightPanelComponent
   ],
   imports: [
-    BrowserModule
+    RouterModule.forRoot(
+      appRoutes,
+      {enableTracing: true} // <-- debugging purposes only
+    ),
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatButtonModule,
+    MatRippleModule,
+    MatInputModule,
+    MatFormFieldModule,
+    FormsModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/comment/comment.component.html

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

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentComponent } from './comment.component';
+
+describe('CommentComponent', () => {
+  let component: CommentComponent;
+  let fixture: ComponentFixture<CommentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/comment/comment.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comment',
+  templateUrl: './comment.component.html',
+  styleUrls: ['./comment.component.css']
+})
+export class CommentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/main-page-post/main-page-post.component.css

@@ -0,0 +1,8 @@
+.example-card {
+  width:90%;
+}
+
+.example-header-image {
+  background-image: url('https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/66/66e2ca8e3874a6b9518ffd7ad2c5842b51e829ee_full.jpg');
+  background-size: cover;
+}

src/app/main-page-post/main-page-post.component.html

@@ -0,0 +1,18 @@
+<mat-card class="example-card" mat-ripple>
+  <div>
+  <mat-card-header>
+    <div mat-card-avatar class="example-header-image"></div>
+    <mat-card-title>{{post.text | slice:0:20}}...</mat-card-title>
+    <mat-card-subtitle><span *ngFor="let x of post.autors">{{x}}, </span></mat-card-subtitle>
+  </mat-card-header>
+   <mat-card-content>
+    <p>
+      {{post.text}}
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button [routerLink]="['/post', id]">MORE</button>
+    <button mat-button [routerLink]="['/post', id]">Comment</button>
+  </mat-card-actions>
+  </div>
+</mat-card>

src/app/main-page-post/main-page-post.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainPagePostComponent } from './main-page-post.component';
+
+describe('MainPagePostComponent', () => {
+  let component: MainPagePostComponent;
+  let fixture: ComponentFixture<MainPagePostComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainPagePostComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainPagePostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main-page-post/main-page-post.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-main-page-post',
+  templateUrl: './main-page-post.component.html',
+  styleUrls: ['./main-page-post.component.css']
+})
+export class MainPagePostComponent implements OnInit {
+  @Input() post;
+  @Input() id;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/main-page/main-page.component.css

@@ -0,0 +1,10 @@
+.mainPage{
+  display:flex;
+  flex-direction: column;
+}
+.postContainer{
+  margin-bottom:2em;
+}
+
+
+

src/app/main-page/main-page.component.html

@@ -0,0 +1,6 @@
+<section class="mainPage">
+  <div class="postContainer" *ngFor="let post of posts">
+  <app-main-page-post [id]="post.pk" [post]="post.fields"></app-main-page-post>
+  </div>
+
+</section>

src/app/main-page/main-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainPageComponent } from './main-page.component';
+
+describe('MainPageComponent', () => {
+  let component: MainPageComponent;
+  let fixture: ComponentFixture<MainPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main-page/main-page.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import {trigger, transition, useAnimation, state, style, animate} from '@angular/animations';
+import { bounce } from 'ng-animate';
+import {PostsService} from '../posts.service';
+@Component({
+  selector: 'app-main-page',
+  templateUrl: './main-page.component.html',
+  styleUrls: ['./main-page.component.css'],
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({ transform: 'translateX(0)' })),
+      transition('void => *', [
+        style({ transform: 'translateX(-100%)' }),
+        animate(100)
+      ]),
+      transition('* => void', [
+        animate(100, style({ transform: 'translateX(100%)' }))
+      ])
+    ])
+  ],
+})
+export class MainPageComponent implements OnInit {
+  posts;
+  constructor(private postService:PostsService) {
+
+  }
+
+  ngOnInit() {
+  this.postService.getPosts(0).subscribe(d=>{
+    this.posts = d;
+  });
+  }
+
+}

src/app/menu/menu.component.html

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

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/menu/menu.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.css']
+})
+export class MenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/posts.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PostsService } from './posts.service';
+
+describe('PostsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PostsService = TestBed.get(PostsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/posts.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+const BACKEND_URL = "http://localhost:8001";
+@Injectable({
+  providedIn: 'root'
+})
+export class PostsService {
+
+  constructor(private http:HttpClient) { }
+  getPosts(page){
+    return this.http.get(`${BACKEND_URL}/post?page=${page}`)
+  }
+  addNewPost(name,text){
+    return this.http.post(`${BACKEND_URL}/post`, )
+  }
+
+}

src/app/right-panel/right-panel.component.css

@@ -0,0 +1,3 @@
+mat-form-field{
+  width:100%;
+}

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

@@ -0,0 +1,23 @@
+<mat-card class="example-card" >
+    <mat-card-header>
+
+      <mat-card-title>Add a new mikrowpis!</mat-card-title>
+      <mat-card-subtitle>Down here!</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+    <mat-form-field>
+      <input matInput placeholder="Imię">
+    </mat-form-field>
+      <mat-form-field>
+        <textarea [(ngModel)]="text" matInput placeholder="Co ci chodzi po głowie :D">
+
+        </textarea>
+      </mat-form-field>
+      <button mat-button color="primary" style="width:100%;margin-bottom:1em">Add!</button>
+      <div>
+        <span (click)="addEmoji(emoji)"matRipple style="cursor: pointer" *ngFor="let emoji of emoji_list">{{emoji}}</span>
+      </div>
+    </mat-card-content>
+
+
+</mat-card>

src/app/right-panel/right-panel.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RightPanelComponent } from './right-panel.component';
+
+describe('RightPanelComponent', () => {
+  let component: RightPanelComponent;
+  let fixture: ComponentFixture<RightPanelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RightPanelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RightPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-right-panel',
+  templateUrl: './right-panel.component.html',
+  styleUrls: ['./right-panel.component.css']
+})
+export class RightPanelComponent implements OnInit {
+ emojis="😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊 😋 😎 😍 😘 🥰 😗 😙 😚 ☺️ 🙂 🤗 🤩 🤔 🤨 😐 😑 😶 🙄 😏 😣 😥 😮 🤐 😯 😪 😫 😴 😌 😛 😜 😝 🤤 😒 😓 😔 😕 🙃 🤑 😲 ☹️ 🙁 😖 😞 😟 😤 😢 😭 😦 😧 😨 😩 🤯 😬 😰 😱 🥵 🥶 😳 🤪 😵 😡 😠 🤬 😷 🤒 🤕 🤢 🤮 🤧 😇 🤠 🤡 🥳 🥴 🥺 🤥 🤫 🤭 🧐 🤓 😈 👿 👹 👺 💀 👻 👽 🤖 💩 😺 😸 😹 😻 😼 😽 🙀 😿 😾"
+  emoji_list=[]
+  text="";
+  constructor() { }
+
+  ngOnInit() {
+   this.emoji_list = Array.from(this.emojis);
+   this.emoji_list = this.emoji_list.filter(d=>d.length>0);
+  }
+  addEmoji(emoji){
+    this.text+=emoji;
+  }
+
+}

src/app/single-post/single-post.component.html

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

src/app/single-post/single-post.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SinglePostComponent } from './single-post.component';
+
+describe('SinglePostComponent', () => {
+  let component: SinglePostComponent;
+  let fixture: ComponentFixture<SinglePostComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SinglePostComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SinglePostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/single-post/single-post.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-single-post',
+  templateUrl: './single-post.component.html',
+  styleUrls: ['./single-post.component.css']
+})
+export class SinglePostComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/index.html

@@ -7,8 +7,10 @@
 
   <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" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -1 +1,4 @@
 /* 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; background-color: #fafafa;}