pages + refactor

src/app/pages/comment/comment.page.html

@@ -0,0 +1,6 @@
+<div class="container">
+  <page-notfound *ngIf="notfound"></page-notfound>
+  <ng-container *ngIf="comment">
+    <ui-comment class="comment" [comment]="comment"></ui-comment>
+  </ng-container>
+</div>

src/app/pages/comment/comment.page.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { ActivatedRoute } from '@angular/router';
+
+import { CommentService } from '../../services/comment.service';
+import { UiComments } from '../../ui/comments/comments.ui';
+
+@Component({
+  selector: 'page-comment',
+  templateUrl: './comment.page.html',
+  styleUrls: [ './comment.page.scss' ]
+})
+export class PageComment implements OnInit {
+
+  id: number;
+  comment: any;
+  notfound: boolean = false;
+
+  constructor(private commentService: CommentService,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.id = +this.route.snapshot.paramMap.get('id');
+    this.refresh();
+  }
+
+  refresh() {
+    this.commentService.getComment(this.id).subscribe((data) => {
+      this.comment = data;
+    }, (error) => {
+      if (error.status == 404) {
+        this.notfound = true;
+      }
+    })
+  }
+
+
+
+}

src/app/pages/new/new.page.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { EntriesService } from '../../services/entries.service';
+import { Router, ActivatedRoute } from '@angular/router';
 import { PageEvent } from '@angular/material/paginator';
 
+import { EntriesService } from '../../services/entries.service';
+
 @Component({
   selector: 'page-new',
   templateUrl: './new.page.html'
@@ -11,31 +13,66 @@ export class PageNew implements OnInit {
   entries: any;
   boundRefresh: Function;
   boundUpdate: Function;
+  init: boolean = true;
 
-  constructor(private entriesService: EntriesService) { }
+  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
-    this.refresh();
     this.boundRefresh = this.refresh.bind(this);
     this.boundUpdate = this.update.bind(this);
+    this.route.queryParams.subscribe(params => {
+      if (this.init) {
+        this.entries = {};
+        if (params[ 'p' ]) {
+          this.entries.number = +params[ 'p' ] - 1;
+          if (this.entries.number < 0) {
+            this.entries.number = 0;
+          }
+        }
+
+        if (params[ 's' ]) {
+          this.entries.size = +params[ 's' ];
+        }
+
+        this.refresh();
+        this.init = false;
+      }
+    });
   }
 
   refresh(): void {
     if (!this.entries) {
-      this.entriesService.getNew().subscribe((data) => {
-        this.entries = data;
-      })
-    } else {
-      this.entries.content = null;
-      this.entriesService.getNewPages(this.entries.number || 0, this.entries.size || 10).subscribe((data: any) => {
-        this.entries = data;
-      }, (error) => { })
+      this.entries = {};
     }
+
+    this.entries.content = null;
+    this.entriesService.getNew(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
+      this.entries = data;
+    }, (error) => { })
+
   }
 
   update(event: PageEvent) {
     this.entries.content = null;
-    this.entriesService.getNewPages(event.pageIndex, event.pageSize).subscribe((data: any) => {
+    const params: any = { p: null, s: null };
+
+    if (event.pageIndex != 0) {
+      params.p = event.pageIndex + 1;
+    }
+
+    if (event.pageSize != 30) {
+      params.s = event.pageSize;
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'merge'
+      });
+
+    this.entriesService.getNew(event.pageIndex, event.pageSize).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
   }

src/app/pages/top/top.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -11,8 +11,7 @@ import { PageEvent } from '@angular/material/paginator';
 })
 export class PageTop implements OnInit {
 
-
-  @Input() entries: any;
+  entries: any;
   boundRefresh: Function;
   boundUpdate: Function;
   init: boolean = true;
@@ -48,7 +47,7 @@ export class PageTop implements OnInit {
     }
 
     this.entries.content = null;
-    this.entriesService.getPages(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
+    this.entriesService.getRanked(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
 
@@ -74,7 +73,7 @@ export class PageTop implements OnInit {
         queryParamsHandling: 'merge'
       });
 
-    this.entriesService.getPages(event.pageIndex, event.pageSize).subscribe((data: any) => {
+    this.entriesService.getRanked(event.pageIndex, event.pageSize).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
   }

src/app/pages/user/user.page.html

@@ -0,0 +1,27 @@
+<div class="container">
+  <page-notfound *ngIf="notfound"></page-notfound>
+  <ng-container *ngIf="user">
+    <table>
+      <tr>
+        <th>{{'user.username' | i18n}}</th>
+        <td>{{user.username}}</td>
+      </tr>
+      <tr>
+        <th>{{'user.points' | i18n}}</th>
+        <td>{{user.metadata && user.metadata.points || 0}}</td>
+      </tr>
+      <tr>
+        <th>{{'user.about' | i18n}}</th>
+        <td><p class="text">{{user.about}}</p></td>
+      </tr>
+      <tr>
+        <th></th>
+        <td><a routerLink="/u/e/{{user.username}}">{{'user.entries' | i18n}}</a></td>
+      </tr>
+      <tr>
+        <th></th>
+        <td><a routerLink="/u/c/{{user.username}}">{{'user.comments' | i18n}}</a></td>
+      </tr>
+    </table>
+  </ng-container>
+</div>

src/app/pages/user/user.page.scss

@@ -0,0 +1,23 @@
+.text {
+  max-width: 100%;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+
+
+table {
+  margin-left: 15px;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}

src/app/pages/user/user.page.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { ActivatedRoute } from '@angular/router';
+
+
+import { UserService } from '../../services/user.service';
+
+@Component({
+  selector: 'page-user',
+  templateUrl: './user.page.html',
+  styleUrls: [ './user.page.scss' ]
+})
+export class PageUser implements OnInit {
+
+  notfound: boolean = false;
+  username: string;
+  user: any;
+
+  constructor(private userService: UserService,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.username = this.route.snapshot.paramMap.get('username');
+    this.userService.getUser(this.username).subscribe((data) => {
+      this.user = data;
+    }, (error) => {
+      if (error.status == 404) {
+        this.notfound = true;
+      }
+    })
+  }
+
+
+
+}

src/app/pages/user/usercomments/usercomments.page.html

@@ -0,0 +1,30 @@
+<div class="container">
+  <div *ngIf="comments && comments.content" fxLayout="column" fxFlexFill class="comments">
+    <ng-container *ngFor="let comment of comments.content; let i = index">
+      <mat-divider class="divider" *ngIf="i > 0"></mat-divider>
+      <div class="comment">
+        <div mat-line>
+          <small>
+            <a routerLink="/c/{{comment.id}}" matTooltip="{{comment.created | datef:'LLLL'}}">{{comment.created
+              | datef}}</a>
+            {{'comment.author' | i18n}}<a routerLink="/u/{{comment.author}}">{{comment.author}}</a>
+          </small>
+        </div>
+        <div mat-line class="text"
+          [style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'">
+          {{comment.text}}</div>
+
+        <div mat-line>
+          <small>
+            <a *ngIf="moderator" href="javascript:" (click)="deleteComment(comment)">{{'comment.delete' | i18n}}</a>
+          </small>
+        </div>
+      </div>
+    </ng-container>
+
+    <small *ngIf="comments.totalElements > comments.content.length">
+      <a mat-stroked-button color="primary" (click)="showMore()">{{ (parent ? 'comments.subcomments.showMore' :
+        'comments.showMore') | i18n}}</a>
+    </small>
+  </div>
+</div>

src/app/pages/user/usercomments/usercomments.page.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { CommentService } from '../../../services/comment.service';
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'page-usercomments',
+  templateUrl: './usercomments.page.html'
+})
+export class PageUserComments implements OnInit {
+
+  username: string;
+  comments: any = {};
+  init: boolean = true;
+
+  constructor(private commentService: CommentService, private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.username = this.route.snapshot.paramMap.get('username');
+    this.commentService.getByUser(this.username, this.comments.number || 0, this.comments.size || 30).subscribe((data: any) => {
+      this.comments = data;
+    }, (error) => { })
+  }
+
+  showMore() {
+    const oldContent: any[] = this.comments.content;
+    this.commentService.getByUser(this.username, this.comments.number + 1, this.comments.size).subscribe((data) => {
+      this.comments = data;
+      for (let comment of this.comments.content) {
+        oldContent.push(comment);
+      }
+      this.comments.content = oldContent;
+    })
+  }
+}

src/app/pages/user/userentries/userentries.page.html

@@ -0,0 +1 @@
+<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>

src/app/pages/user/userentries/userentries.page.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { EntriesService } from '../../../services/entries.service';
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'page-userentries',
+  templateUrl: './userentries.page.html'
+})
+export class PageUserEntries implements OnInit {
+
+  username : string;
+  entries: any;
+  boundRefresh: Function;
+  boundUpdate: Function;
+  init: boolean = true;
+
+  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.username = this.route.snapshot.paramMap.get('username');
+    this.boundRefresh = this.refresh.bind(this);
+    this.boundUpdate = this.update.bind(this);
+    this.route.queryParams.subscribe(params => {
+      if (this.init) {
+        this.entries = {};
+        if (params[ 'p' ]) {
+          this.entries.number = +params[ 'p' ] - 1;
+          if (this.entries.number < 0) {
+            this.entries.number = 0;
+          }
+        }
+
+        if (params[ 's' ]) {
+          this.entries.size = +params[ 's' ];
+        }
+
+        this.refresh();
+        this.init = false;
+      }
+    });
+  }
+
+  refresh(): void {
+    if (!this.entries) {
+      this.entries = {};
+    }
+
+    this.entries.content = null;
+    this.entriesService.getByUser(this.username, this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
+      this.entries = data;
+    }, (error) => { })
+
+  }
+
+  update(event: PageEvent) {
+    this.entries.content = null;
+    const params: any = { p: null, s: null };
+
+    if (event.pageIndex != 0) {
+      params.p = event.pageIndex + 1;
+    }
+
+    if (event.pageSize != 30) {
+      params.s = event.pageSize;
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'merge'
+      });
+
+    this.entriesService.getByUser(this.username,event.pageIndex, event.pageSize).subscribe((data: any) => {
+      this.entries = data;
+    }, (error) => { })
+  }
+
+}