restructure entries pages, last comments

This commit is contained in:
_Bastler 2021-10-06 09:49:16 +02:00
parent 4c69a9b177
commit ac7e46c627
22 changed files with 205 additions and 271 deletions

View File

@ -6,6 +6,7 @@ import { PageBookmarks } from './pages/bookmarks/bookmarks.page';
import { PageComment } from './pages/comment/comment.page'; import { PageComment } from './pages/comment/comment.page';
import { PageEntry } from './pages/entry/entry.page'; import { PageEntry } from './pages/entry/entry.page';
import { PageHot } from './pages/hot/hot.page'; import { PageHot } from './pages/hot/hot.page';
import { PageLast } from './pages/last/last.page';
import { PageLogin } from './pages/login/login.page'; import { PageLogin } from './pages/login/login.page';
import { PageNew } from './pages/new/new.page'; import { PageNew } from './pages/new/new.page';
import { PageNotFound } from './pages/notfound/notfound.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/c/:username', component: PageUserComments, canActivate: [ AuthenticatedGuard ] },
{ path: 'u/e/:username', component: PageUserEntries, canActivate: [ AuthenticatedGuard ] }, { path: 'u/e/:username', component: PageUserEntries, canActivate: [ AuthenticatedGuard ] },
{ path: 'hot', component: PageHot, canActivate: [ AuthenticatedGuard ] }, { path: 'hot', component: PageHot, canActivate: [ AuthenticatedGuard ] },
{ path: 'last', component: PageLast, canActivate: [ AuthenticatedGuard ] },
{ path: 'new', component: PageNew, canActivate: [ AuthenticatedGuard ] }, { path: 'new', component: PageNew, canActivate: [ AuthenticatedGuard ] },
{ path: 'bookmarks', component: PageBookmarks, canActivate: [ AuthenticatedGuard ] }, { path: 'bookmarks', component: PageBookmarks, canActivate: [ AuthenticatedGuard ] },
{ path: 'submit', component: PageSubmission, canActivate: [ AuthenticatedGuard ] }, { path: 'submit', component: PageSubmission, canActivate: [ AuthenticatedGuard ] },

View File

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

View File

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

View File

@ -1,6 +1,4 @@
import { Component, OnInit, Input } from '@angular/core'; 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'; import { BookmarksService } from '../../services/bookmarks.service';
@ -9,73 +7,16 @@ import { BookmarksService } from '../../services/bookmarks.service';
templateUrl: './bookmarks.page.html' templateUrl: './bookmarks.page.html'
}) })
export class PageBookmarks implements OnInit { 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 { 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) => { })
} }
} }

View File

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

View File

@ -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) => { })
}
}

View File

@ -3,7 +3,7 @@
<ng-container *ngIf="entry"> <ng-container *ngIf="entry">
<ui-entry [entry]="entry" [change]="boundRefresh"></ui-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> <ui-commentform [target]="entry.id" (replyCommentEvent)="replyCallback($event)"></ui-commentform>

View File

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

View File

@ -11,71 +11,16 @@ import { PageEvent } from '@angular/material/paginator';
}) })
export class PageHot implements OnInit { 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 { 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) => { })
} }
} }

View File

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

View File

@ -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);
}
}

View File

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

View File

@ -10,71 +10,16 @@ import { EntriesService } from '../../services/entries.service';
}) })
export class PageNew implements OnInit { 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 { 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) => { })
} }
} }

View File

@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { EntriesService } from '../../services/entries.service'; import { EntriesService } from '../../services/entries.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms'; import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { tap, distinctUntilChanged, debounceTime } from 'rxjs/operators';
@Component({ @Component({
selector: 'page-submission', selector: 'page-submission',
@ -38,6 +39,16 @@ export class PageSubmission implements OnInit {
this.form.get('url').setValidators([ Validators.nullValidator ]); 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 { hasError(controlName: string): boolean {

View File

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

View File

@ -1,9 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { EntriesService } from '../../services/entries.service'; import { EntriesService } from '../../services/entries.service';
import { PageEvent } from '@angular/material/paginator';
@Component({ @Component({
selector: 'page-top', selector: 'page-top',
@ -11,71 +8,16 @@ import { PageEvent } from '@angular/material/paginator';
}) })
export class PageTop implements OnInit { 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 { 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) => { })
} }
} }

View File

@ -10,11 +10,7 @@ export class BookmarksService {
constructor(private http: HttpClient) { 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); return this.http.get(environment.apiUrl + "/bookmarks" + "?page=" + page + "&size=" + size);
} }

View File

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

View File

@ -27,9 +27,8 @@
</small> </small>
</div> </div>
<div mat-line class="text" <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> <div mat-line>
<small> <small>
<a href="javascript:" (click)="comment.metadata.reply=!comment.metadata.reply">{{(comment.metadata.reply ? <a href="javascript:" (click)="comment.metadata.reply=!comment.metadata.reply">{{(comment.metadata.reply ?
@ -45,4 +44,5 @@
</div> </div>
</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>

View File

@ -26,19 +26,27 @@
<mat-icon>trending_up</mat-icon> {{'page.top' | i18n}} <mat-icon>trending_up</mat-icon> {{'page.top' | i18n}}
</a> </a>
<a *ngIf="authenticated" routerLink="/new" routerLinkActive="active" mat-list-item> <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> </a>
<mat-divider></mat-divider>
<a *ngIf="authenticated" routerLink="/hot" routerLinkActive="active" mat-list-item> <a *ngIf="authenticated" routerLink="/hot" routerLinkActive="active" mat-list-item>
<mat-icon>whatshot</mat-icon> {{'page.hot' | i18n}} <mat-icon>whatshot</mat-icon> {{'page.hot' | i18n}}
</a> </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> <a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
<mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}} <mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}}
</a> </a>
<mat-divider></mat-divider>
<a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item> <a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item>
<mat-icon>tune</mat-icon> {{'settings' | i18n}} <mat-icon>tune</mat-icon> {{'settings' | i18n}}
</a> </a>
<mat-divider></mat-divider> <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> <a *ngIf="authenticated" (click)="logout()" mat-list-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}} <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a> </a>

View File

@ -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;
}
}

View File

@ -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 { .dark-theme {
app-root { app-root {
@ -303,11 +316,8 @@ table {
} }
} }
} }
}
.help-button { a[href*="//"]::after {
float: right; color: #aeaeae;
position: relative; }
top: -40px;
right: 15px;
} }