restructure entries pages, last comments

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { PageBookmarks } from './pages/bookmarks/bookmarks.page';
 import { PageComment } from './pages/comment/comment.page';
 import { PageEntry } from './pages/entry/entry.page';
 import { PageHot } from './pages/hot/hot.page';
+import { PageLast } from './pages/last/last.page';
 import { PageLogin } from './pages/login/login.page';
 import { PageNew } from './pages/new/new.page';
 import { PageNotFound } from './pages/notfound/notfound.page';
@@ -29,6 +30,7 @@ const routes: Routes = [
       { path: 'u/c/:username', component: PageUserComments, canActivate: [ AuthenticatedGuard ] },
       { path: 'u/e/:username', component: PageUserEntries, canActivate: [ AuthenticatedGuard ] },
       { path: 'hot', component: PageHot, canActivate: [ AuthenticatedGuard ] },
+      { path: 'last', component: PageLast, canActivate: [ AuthenticatedGuard ] },
       { path: 'new', component: PageNew, canActivate: [ AuthenticatedGuard ] },
       { path: 'bookmarks', component: PageBookmarks, canActivate: [ AuthenticatedGuard ] },
       { path: 'submit', component: PageSubmission, canActivate: [ AuthenticatedGuard ] },

src/app/app.module.ts

@@ -15,11 +15,14 @@ import { AutofocusDirective } from './material/autofocus';
 
 import { I18nPipe } from './utils/i18n.pipe';
 import { MomentPipe } from './utils/moment.pipe';
+import { UrlTextPipe } from './utils/urltext.pipe';
 import { AppComponent } from './app.component';
 import { PageBookmarks } from './pages/bookmarks/bookmarks.page';
 import { PageComment } from './pages/comment/comment.page';
 import { PageEntry } from './pages/entry/entry.page';
+import { PageEntries } from './pages/entries/entries.page';
 import { PageHot } from './pages/hot/hot.page';
+import { PageLast } from './pages/last/last.page';
 import { PageLogin } from './pages/login/login.page';
 import { PageNew } from './pages/new/new.page';
 import { PageNotFound } from './pages/notfound/notfound.page'
@@ -77,11 +80,14 @@ export class XhrInterceptor implements HttpInterceptor {
     AutofocusDirective,
     I18nPipe,
     MomentPipe,
+    UrlTextPipe,
     AppComponent,
     PageBookmarks,
     PageComment,
     PageEntry,
+    PageEntries,
     PageHot,
+    PageLast,
     PageLogin,
     PageNew,
     PageNotFound,

src/app/pages/bookmarks/bookmarks.page.html

@@ -1 +1 @@
-<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>
+<page-entries [fetch]="boundFetch"></page-entries>

src/app/pages/bookmarks/bookmarks.page.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { PageEvent } from '@angular/material/paginator';
 
 import { BookmarksService } from '../../services/bookmarks.service';
 
@@ -9,73 +7,16 @@ import { BookmarksService } from '../../services/bookmarks.service';
   templateUrl: './bookmarks.page.html'
 })
 export class PageBookmarks implements OnInit {
+  boundFetch: Function;
 
-  @Input() entries: any;
+  constructor(private bookmarksService: BookmarksService) { }
-  boundRefresh: Function;
-  boundUpdate: Function;
-  init: boolean = true;
-
-  constructor(private bookmarksService: BookmarksService, private router: Router, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
-    this.boundRefresh = this.refresh.bind(this);
+    this.boundFetch = this.fetch.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' ]) {
+  fetch(page: number, size: number) {
-          this.entries.size = +params[ 's' ];
+    return this.bookmarksService.getEntries(page,size);
-        }
-
-        this.refresh();
-        this.init = false;
-      }
-    });
-  }
-
-  refresh(): void {
-    if (!this.entries) {
-      this.entries = {};
-    }
-
-    this.entries.content = null;
-    this.bookmarksService.getEntriesPages(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
-      this.entries = data;
-      this.entries.bookmarks = true;
-    }, (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.bookmarksService.getEntriesPages(event.pageIndex, event.pageSize).subscribe((data: any) => {
-      this.entries = data;
-    }, (error) => { })
   }
 
 }

src/app/pages/entries/entries.page.html

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

src/app/pages/entries/entries.page.ts

@@ -0,0 +1,81 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'page-entries',
+  templateUrl: './entries.page.html'
+})
+export class PageEntries implements OnInit {
+
+  @Input() fetch: Function;
+  entries: any;
+  boundRefresh: Function;
+  boundUpdate: Function;
+  init: boolean = true;
+
+  constructor(private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    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.fetch(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.fetch(event.pageIndex, event.pageSize).subscribe((data: any) => {
+      this.entries = data;
+    }, (error) => { })
+  }
+
+}

src/app/pages/entry/entry.page.html

@@ -3,7 +3,7 @@
   <ng-container *ngIf="entry">
     <ui-entry [entry]="entry" [change]="boundRefresh"></ui-entry>
 
-    <p class="text">{{entry.text}}</p>
+    <p class="text" [innerHTML]="entry.text | urltext"></p>
 
     <ui-commentform [target]="entry.id" (replyCommentEvent)="replyCallback($event)"></ui-commentform>
 

src/app/pages/hot/hot.page.html

@@ -1 +1 @@
-<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>
+<page-entries [fetch]="boundFetch"></page-entries>

src/app/pages/hot/hot.page.ts

@@ -11,71 +11,16 @@ import { PageEvent } from '@angular/material/paginator';
 })
 export class PageHot implements OnInit {
 
-  entries: any;
+  boundFetch: Function;
-  boundRefresh: Function;
-  boundUpdate: Function;
-  init: boolean = true;
 
-  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
+  constructor(private entriesService: EntriesService) { }
 
   ngOnInit(): void {
-    this.boundRefresh = this.refresh.bind(this);
+    this.boundFetch = this.fetch.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' ]) {
+  fetch(page: number, size: number) {
-          this.entries.size = +params[ 's' ];
+    return this.entriesService.getComments(page,size);
-        }
-
-        this.refresh();
-        this.init = false;
-      }
-    });
-  }
-
-  refresh(): void {
-    if (!this.entries) {
-      this.entries = {};
-    }
-
-    this.entries.content = null;
-    this.entriesService.getComments(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.getComments(event.pageIndex, event.pageSize).subscribe((data: any) => {
-      this.entries = data;
-    }, (error) => { })
   }
 
 }

src/app/pages/last/last.page.html

@@ -0,0 +1 @@
+<page-entries [fetch]="boundFetch"></page-entries>

src/app/pages/last/last.page.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+
+import { EntriesService } from '../../services/entries.service';
+
+@Component({
+  selector: 'page-last',
+  templateUrl: './last.page.html'
+})
+export class PageLast implements OnInit {
+
+  boundFetch: Function;
+
+  constructor(private entriesService: EntriesService) { }
+
+  ngOnInit(): void {
+    this.boundFetch = this.fetch.bind(this);
+  }
+
+  fetch(page: number, size: number) {
+    return this.entriesService.getLastComment(page,size);
+  }
+
+}

src/app/pages/new/new.page.html

@@ -1 +1 @@
-<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>
+<page-entries [fetch]="boundFetch"></page-entries>

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

@@ -10,71 +10,16 @@ import { EntriesService } from '../../services/entries.service';
 })
 export class PageNew implements OnInit {
 
-  entries: any;
+  boundFetch: Function;
-  boundRefresh: Function;
-  boundUpdate: Function;
-  init: boolean = true;
 
-  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
+  constructor(private entriesService: EntriesService) { }
 
   ngOnInit(): void {
-    this.boundRefresh = this.refresh.bind(this);
+    this.boundFetch = this.fetch.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' ]) {
+  fetch(page: number, size: number) {
-          this.entries.size = +params[ 's' ];
+    return this.entriesService.getNew(page,size);
-        }
-
-        this.refresh();
-        this.init = false;
-      }
-    });
-  }
-
-  refresh(): void {
-    if (!this.entries) {
-      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;
-    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/submission/submission.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { EntriesService } from '../../services/entries.service';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
+import { tap, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 
 @Component({
   selector: 'page-submission',
@@ -38,6 +39,16 @@ export class PageSubmission implements OnInit {
         this.form.get('url').setValidators([ Validators.nullValidator ]);
       }
     });
+
+    this.form.get('url').valueChanges.pipe(
+      debounceTime(800),
+      distinctUntilChanged()).subscribe((value) => {
+        if (value && !this.form.get('title').value) {
+          this.entriesService.titleHelper(value).subscribe((title: string) => {
+            this.form.get('title').setValue(title);
+          })
+        }
+      })
   }
 
   hasError(controlName: string): boolean {

src/app/pages/top/top.page.html

@@ -1 +1 @@
-<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>
+<page-entries [fetch]="boundFetch"></page-entries>

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

@@ -1,9 +1,6 @@
 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-top',
@@ -11,71 +8,16 @@ import { PageEvent } from '@angular/material/paginator';
 })
 export class PageTop implements OnInit {
 
-  entries: any;
+  boundFetch: Function;
-  boundRefresh: Function;
-  boundUpdate: Function;
-  init: boolean = true;
 
-  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
+  constructor(private entriesService: EntriesService) { }
 
   ngOnInit(): void {
-    this.boundRefresh = this.refresh.bind(this);
+    this.boundFetch = this.fetch.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' ]) {
+  fetch(page: number, size: number) {
-          this.entries.size = +params[ 's' ];
+    return this.entriesService.getRanked(page,size);
-        }
-
-        this.refresh();
-        this.init = false;
-      }
-    });
-  }
-
-  refresh(): void {
-    if (!this.entries) {
-      this.entries = {};
-    }
-
-    this.entries.content = null;
-    this.entriesService.getRanked(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.getRanked(event.pageIndex, event.pageSize).subscribe((data: any) => {
-      this.entries = data;
-    }, (error) => { })
   }
 
 }

src/app/services/bookmarks.service.ts

@@ -10,11 +10,7 @@ export class BookmarksService {
     constructor(private http: HttpClient) {
     }
 
-    getEntries() {
+    getEntries(page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/bookmarks");
-    }
-
-    getEntriesPages(page: number, size: number) {
         return this.http.get(environment.apiUrl + "/bookmarks" + "?page=" + page + "&size=" + size);
     }
 

src/app/services/entries.service.ts

@@ -14,12 +14,16 @@ export class EntriesService {
         return this.http.get(environment.apiUrl + "/entries?page=" + page + "&size=" + size);
     }
 
+    getNew(page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/entries/new?page=" + page + "&size=" + size);
+    }
+
     getComments(page: number, size: number) {
         return this.http.get(environment.apiUrl + "/entries/comments?page=" + page + "&size=" + size);
     }
 
-    getNew(page: number, size: number) {
+    getLastComment(page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/entries/new?page=" + page + "&size=" + size);
+        return this.http.get(environment.apiUrl + "/entries/last?page=" + page + "&size=" + size);
     }
 
     getByUser(username: string, page: number, size: number) {
@@ -35,4 +39,8 @@ export class EntriesService {
         return this.http.post(environment.apiUrl + "/entries", entry);
     }
 
+    titleHelper(url: string) {
+        return this.http.get(environment.apiUrl + "/entries/helper/title?url=" + encodeURIComponent(url));
+    }
+
 }

src/app/ui/comment/comment.ui.html

@@ -27,9 +27,8 @@
     </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'">
+    [style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'"
-    {{comment.text}}</div>
+    [innerHTML]="comment.text | urltext"></div>
-
   <div mat-line>
     <small>
       <a href="javascript:" (click)="comment.metadata.reply=!comment.metadata.reply">{{(comment.metadata.reply ?
@@ -45,4 +44,5 @@
   </div>
 </div>
 
-<ui-comments *ngIf="subcomments && comment.metadata && (comment.metadata.comments > 0 || comment.metadata.reply)" #subcomments [target]="comment.target" [parent]="comment.id" [subcomments]="subcomments"></ui-comments>
+<ui-comments *ngIf="subcomments && comment.metadata && (comment.metadata.comments > 0 || comment.metadata.reply)"
+  #subcomments [target]="comment.target" [parent]="comment.id" [subcomments]="subcomments"></ui-comments>

src/app/ui/main/main.ui.html

@@ -26,19 +26,27 @@
         <mat-icon>trending_up</mat-icon> {{'page.top' | i18n}}
       </a>
       <a *ngIf="authenticated" routerLink="/new" routerLinkActive="active" mat-list-item>
-        <mat-icon>history</mat-icon> {{'page.new' | i18n}}
+        <mat-icon>today</mat-icon> {{'page.new' | i18n}}
       </a>
+      <mat-divider></mat-divider>
       <a *ngIf="authenticated" routerLink="/hot" routerLinkActive="active" mat-list-item>
         <mat-icon>whatshot</mat-icon> {{'page.hot' | i18n}}
       </a>
+      <a *ngIf="authenticated" routerLink="/last" routerLinkActive="active" mat-list-item>
+        <mat-icon>history</mat-icon> {{'page.last' | i18n}}
+      </a>
+      <mat-divider></mat-divider>
       <a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
         <mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}}
       </a>
-      <mat-divider></mat-divider>
       <a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item>
         <mat-icon>tune</mat-icon> {{'settings' | i18n}}
       </a>
       <mat-divider></mat-divider>
+      <a (click)="openExternal('https://wiki.bstly.de/services/bstlboard/faq','_blank')" routerLinkActive="active" mat-list-item>
+        <mat-icon>help</mat-icon> {{'page.faq' | i18n}}
+      </a>
+      <mat-divider></mat-divider>
       <a *ngIf="authenticated" (click)="logout()" mat-list-item>
         <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
       </a>

src/app/utils/urltext.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'urltext' })
+export class UrlTextPipe implements PipeTransform {
+
+  httpPattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/ig;
+  wwwPattern =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
+
+  transform(value: string): any {
+    value = value.replace(this.httpPattern, '<a href="$1" target="_blank">$3</a>');
+    value = value.replace(this.wwwPattern, '$1<a target="_blank" href="https://$2">$2</a>');
+    return value;
+  }
+}

src/styles.scss

@@ -277,6 +277,19 @@ table {
 }
 
 
+
+a[href*="//"]::after {
+  font-family: "Material Icons";
+  font-size: 10px;
+  display: inline-block;
+  position: relative;
+  top: -3px;
+  content: "launch";
+  color: #6e6e6e;
+  text-decoration: none
+}
+
+
 .dark-theme {
 
   app-root {
@@ -303,11 +316,8 @@ table {
       }
     }
   }
-}
 
-.help-button {
+  a[href*="//"]::after {
-  float: right;
+    color: #aeaeae;
-  position: relative;
+  }
-  top: -40px;
-  right: 15px;
 }