From ac7e46c627709412803d8891bef2b27892dcc9fd Mon Sep 17 00:00:00 2001 From: _Bastler Date: Wed, 6 Oct 2021 09:49:16 +0200 Subject: [PATCH] restructure entries pages, last comments --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 6 ++ src/app/pages/bookmarks/bookmarks.page.html | 2 +- src/app/pages/bookmarks/bookmarks.page.ts | 69 ++---------------- src/app/pages/entries/entries.page.html | 1 + src/app/pages/entries/entries.page.ts | 81 +++++++++++++++++++++ src/app/pages/entry/entry.page.html | 2 +- src/app/pages/hot/hot.page.html | 2 +- src/app/pages/hot/hot.page.ts | 65 ++--------------- src/app/pages/last/last.page.html | 1 + src/app/pages/last/last.page.ts | 23 ++++++ src/app/pages/new/new.page.html | 2 +- src/app/pages/new/new.page.ts | 65 ++--------------- src/app/pages/submission/submission.page.ts | 11 +++ src/app/pages/top/top.page.html | 2 +- src/app/pages/top/top.page.ts | 68 ++--------------- src/app/services/bookmarks.service.ts | 6 +- src/app/services/entries.service.ts | 12 ++- src/app/ui/comment/comment.ui.html | 8 +- src/app/ui/main/main.ui.html | 12 ++- src/app/utils/urltext.pipe.ts | 14 ++++ src/styles.scss | 22 ++++-- 22 files changed, 205 insertions(+), 271 deletions(-) create mode 100644 src/app/pages/entries/entries.page.html create mode 100644 src/app/pages/entries/entries.page.ts create mode 100644 src/app/pages/last/last.page.html create mode 100644 src/app/pages/last/last.page.ts create mode 100644 src/app/utils/urltext.pipe.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b319f6d..2f35db5 100644 --- a/src/app/app-routing.module.ts +++ b/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 ] }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6ac9910..2abbb27 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/pages/bookmarks/bookmarks.page.html b/src/app/pages/bookmarks/bookmarks.page.html index 24cc006..9d79ea7 100644 --- a/src/app/pages/bookmarks/bookmarks.page.html +++ b/src/app/pages/bookmarks/bookmarks.page.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/bookmarks/bookmarks.page.ts b/src/app/pages/bookmarks/bookmarks.page.ts index 1120ab8..5ed3681 100644 --- a/src/app/pages/bookmarks/bookmarks.page.ts +++ b/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; - boundRefresh: Function; - boundUpdate: Function; - init: boolean = true; - - constructor(private bookmarksService: BookmarksService, private router: Router, private route: ActivatedRoute) { } + constructor(private bookmarksService: BookmarksService) { } 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; - } - }); + this.boundFetch = this.fetch.bind(this); } - 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) => { }) + fetch(page: number, size: number) { + return this.bookmarksService.getEntries(page,size); } } diff --git a/src/app/pages/entries/entries.page.html b/src/app/pages/entries/entries.page.html new file mode 100644 index 0000000..24cc006 --- /dev/null +++ b/src/app/pages/entries/entries.page.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/entries/entries.page.ts b/src/app/pages/entries/entries.page.ts new file mode 100644 index 0000000..e1c6d6f --- /dev/null +++ b/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) => { }) + } + +} diff --git a/src/app/pages/entry/entry.page.html b/src/app/pages/entry/entry.page.html index 4a8a0f0..9b77dcb 100644 --- a/src/app/pages/entry/entry.page.html +++ b/src/app/pages/entry/entry.page.html @@ -3,7 +3,7 @@ -

{{entry.text}}

+

diff --git a/src/app/pages/hot/hot.page.html b/src/app/pages/hot/hot.page.html index 24cc006..9d79ea7 100644 --- a/src/app/pages/hot/hot.page.html +++ b/src/app/pages/hot/hot.page.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/hot/hot.page.ts b/src/app/pages/hot/hot.page.ts index 5c5e7a9..506f9c8 100644 --- a/src/app/pages/hot/hot.page.ts +++ b/src/app/pages/hot/hot.page.ts @@ -11,71 +11,16 @@ import { PageEvent } from '@angular/material/paginator'; }) export class PageHot implements OnInit { - entries: any; - boundRefresh: Function; - boundUpdate: Function; - init: boolean = true; + boundFetch: Function; - constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { } + constructor(private entriesService: EntriesService) { } 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; - } - }); + this.boundFetch = this.fetch.bind(this); } - 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) => { }) + fetch(page: number, size: number) { + return this.entriesService.getComments(page,size); } } diff --git a/src/app/pages/last/last.page.html b/src/app/pages/last/last.page.html new file mode 100644 index 0000000..9d79ea7 --- /dev/null +++ b/src/app/pages/last/last.page.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/last/last.page.ts b/src/app/pages/last/last.page.ts new file mode 100644 index 0000000..c778a03 --- /dev/null +++ b/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); + } + +} diff --git a/src/app/pages/new/new.page.html b/src/app/pages/new/new.page.html index 24cc006..9d79ea7 100644 --- a/src/app/pages/new/new.page.html +++ b/src/app/pages/new/new.page.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/new/new.page.ts b/src/app/pages/new/new.page.ts index d40b768..03c32e1 100644 --- a/src/app/pages/new/new.page.ts +++ b/src/app/pages/new/new.page.ts @@ -10,71 +10,16 @@ import { EntriesService } from '../../services/entries.service'; }) export class PageNew implements OnInit { - entries: any; - boundRefresh: Function; - boundUpdate: Function; - init: boolean = true; + boundFetch: Function; - constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { } + constructor(private entriesService: EntriesService) { } 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; - } - }); + this.boundFetch = this.fetch.bind(this); } - 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) => { }) + fetch(page: number, size: number) { + return this.entriesService.getNew(page,size); } } diff --git a/src/app/pages/submission/submission.page.ts b/src/app/pages/submission/submission.page.ts index bf692ae..d09d621 100644 --- a/src/app/pages/submission/submission.page.ts +++ b/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 { diff --git a/src/app/pages/top/top.page.html b/src/app/pages/top/top.page.html index 24cc006..9d79ea7 100644 --- a/src/app/pages/top/top.page.html +++ b/src/app/pages/top/top.page.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/top/top.page.ts b/src/app/pages/top/top.page.ts index 4ca638c..b23160a 100644 --- a/src/app/pages/top/top.page.ts +++ b/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; - boundRefresh: Function; - boundUpdate: Function; - init: boolean = true; + boundFetch: Function; - constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { } + constructor(private entriesService: EntriesService) { } 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; - } - }); + this.boundFetch = this.fetch.bind(this); } - 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) => { }) + fetch(page: number, size: number) { + return this.entriesService.getRanked(page,size); } } diff --git a/src/app/services/bookmarks.service.ts b/src/app/services/bookmarks.service.ts index c03f62f..061953f 100644 --- a/src/app/services/bookmarks.service.ts +++ b/src/app/services/bookmarks.service.ts @@ -10,11 +10,7 @@ export class BookmarksService { constructor(private http: HttpClient) { } - getEntries() { - return this.http.get(environment.apiUrl + "/bookmarks"); - } - - getEntriesPages(page: number, size: number) { + getEntries(page: number, size: number) { return this.http.get(environment.apiUrl + "/bookmarks" + "?page=" + page + "&size=" + size); } diff --git a/src/app/services/entries.service.ts b/src/app/services/entries.service.ts index 57ce041..01e7c05 100644 --- a/src/app/services/entries.service.ts +++ b/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) { - return this.http.get(environment.apiUrl + "/entries/new?page=" + page + "&size=" + size); + getLastComment(page: number, size: number) { + 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)); + } + } \ No newline at end of file diff --git a/src/app/ui/comment/comment.ui.html b/src/app/ui/comment/comment.ui.html index 2a00d0c..fb09885 100644 --- a/src/app/ui/comment/comment.ui.html +++ b/src/app/ui/comment/comment.ui.html @@ -27,9 +27,8 @@
- {{comment.text}}
- + [style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'" + [innerHTML]="comment.text | urltext">
{{(comment.metadata.reply ? @@ -45,4 +44,5 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/src/app/ui/main/main.ui.html b/src/app/ui/main/main.ui.html index c96050f..c698601 100644 --- a/src/app/ui/main/main.ui.html +++ b/src/app/ui/main/main.ui.html @@ -26,19 +26,27 @@ trending_up {{'page.top' | i18n}} - history {{'page.new' | i18n}} + today {{'page.new' | i18n}} + whatshot {{'page.hot' | i18n}} + + history {{'page.last' | i18n}} + + bookmarks {{'bookmarks' | i18n}} - tune {{'settings' | i18n}} + + help {{'page.faq' | i18n}} + + exit_to_app {{'logout' | i18n}} diff --git a/src/app/utils/urltext.pipe.ts b/src/app/utils/urltext.pipe.ts new file mode 100644 index 0000000..fdd01e0 --- /dev/null +++ b/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, '$3'); + value = value.replace(this.wwwPattern, '$1$2'); + return value; + } +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 8305245..10870f0 100644 --- a/src/styles.scss +++ b/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 { - float: right; - position: relative; - top: -40px; - right: 15px; + a[href*="//"]::after { + color: #aeaeae; + } } \ No newline at end of file