tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add share button

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-19 22:38:43 +02:00
parent de443bb5de
commit 51d5283917
12 changed files with 198 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/app.module.ts
View File

@ -21,7 +21,7 @@ import {TranslateModule, TranslateService} from '@ngx-translate/core';
// @ts-ignore
import * as enLang from '../assets/i18n/en.json';
import {HttpClientModule} from '@angular/common/http';
import {MatButtonToggleModule, MatCheckboxModule, MatDividerModule, MatTooltipModule} from '@angular/material';
import {MatButtonToggleModule, MatCheckboxModule, MatDialogModule, MatDividerModule, MatTooltipModule} from '@angular/material';
import {FormsModule} from '@angular/forms';
import {RegionComponent} from './components/region/region.component';
import {ResultComponent} from './components/result/result.component';
@ -30,6 +30,8 @@ import {GraphComponent} from './components/graph/graph.component';
import {RegionStatsComponent} from './components/region-stats/region-stats.component';
import {BookmarkButtonComponent} from './components/bookmark-button/bookmark-button.component';
import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.component';
import {ShareButtonComponent} from './components/share-button/share-button.component';
import {ShareDialogComponent} from './dialogs/share-dialog/share-dialog.component';
@NgModule({
@ -45,7 +47,9 @@ import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.co
GraphComponent,
RegionStatsComponent,
BookmarkButtonComponent,
BookmarkListComponent
BookmarkListComponent,
ShareButtonComponent,
ShareDialogComponent
],
imports: [
BrowserModule,
@ -66,10 +70,14 @@ import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.co
FormsModule,
MatButtonToggleModule,
MatDividerModule,
MatTooltipModule
MatTooltipModule,
MatDialogModule
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
entryComponents: [
ShareDialogComponent
]
})
export class AppModule {
constructor(translate: TranslateService) {

4
frontend/src/app/components/region/region.component.html
View File

@ -7,8 +7,6 @@
<span class="region-country">| {{region.country}}</span>
</div>
<app-bookmark-button [region]="region"></app-bookmark-button>
<button mat-icon-button>
<mat-icon>share</mat-icon>
</button>
<app-share-button [region]="region"></app-share-button>
</div>
</div>

4
frontend/src/app/components/result/result.component.html
View File

@ -7,9 +7,7 @@
<span class="result-country">| {{result.country}}</span>
</div>
<app-bookmark-button [region]="result"></app-bookmark-button>
<button mat-icon-button>
<mat-icon>share</mat-icon>
</button>
<app-share-button [region]="result"></app-share-button>
</div>
<div class="result-details">
<table>

3
frontend/src/app/components/share-button/share-button.component.html Normal file
View File

@ -0,0 +1,3 @@
<button (click)="onShare($event)" mat-icon-button>
<mat-icon>share</mat-icon>
</button>

0
frontend/src/app/components/share-button/share-button.component.scss Normal file
View File

25
frontend/src/app/components/share-button/share-button.component.spec.ts Normal file
View File

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

54
frontend/src/app/components/share-button/share-button.component.ts Normal file
View File

@ -0,0 +1,54 @@
import {Component, Input, OnInit} from '@angular/core';
import {Region} from '../../interfaces/region.interface';
import {ShareDialogComponent} from '../../dialogs/share-dialog/share-dialog.component';
import {MatDialog} from '@angular/material';
@Component({
selector: 'app-share-button',
templateUrl: './share-button.component.html',
styleUrls: ['./share-button.component.scss']
})
export class ShareButtonComponent implements OnInit {
@Input()
region: Region;
constructor(public dialog: MatDialog) {
}
ngOnInit() {
}
async onShare(event: Event) {
event.stopPropagation();
// @ts-ignore
if (navigator.share) {
try {
await this.executeMobileShareMenu();
} catch (e) {
this.executeShareDialog();
}
} else {
this.executeShareDialog();
}
}
async executeMobileShareMenu() {
const shareData = {
title: 'Travopti',
text: `Check out the region "${this.region.name}"`,
url: `https://travopti.de/region/${this.region.region_id}`
};
// @ts-ignore
await navigator.share(shareData);
}
executeShareDialog() {
this.dialog.open(ShareDialogComponent, {
width: '350px',
data: this.region
});
}
}

4
frontend/src/app/containers/region-details/region-details.component.html
View File

@ -7,9 +7,7 @@
<span class="region-name">{{region.name}}</span>
</div>
<app-bookmark-button [region]="region"></app-bookmark-button>
<button mat-icon-button>
<mat-icon>share</mat-icon>
</button>
<app-share-button [region]="region"></app-share-button>
</div>
<p *ngIf="region.description" class="region-decsription">
<span>{{region.description.substr(0, DESC_CUT_POINT)}}</span>

13
frontend/src/app/dialogs/share-dialog/share-dialog.component.html Normal file
View File

@ -0,0 +1,13 @@
<div class="dialog-header">
<span mat-dialog-title>Share the link</span>
<button [mat-dialog-close]="undefined" mat-icon-button>
<mat-icon>clear</mat-icon>
</button>
</div>
<div class="dialog-body">
<input #url [disabled]="isCopied" class="url" value="http://{{host}}/region/{{data.region_id}}">
<button (click)="onCopy()" [disabled]="isCopied" color="primary" mat-flat-button>
<mat-icon>{{isCopied ? 'done' : 'content_copy'}}</mat-icon>
</button>
</div>

23
frontend/src/app/dialogs/share-dialog/share-dialog.component.scss Normal file
View File

@ -0,0 +1,23 @@
.dialog-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 2rem;
span {
flex: 1 1 auto;
margin: 0;
}
}
.dialog-body {
display: flex;
flex-direction: row;
.url {
flex: 1 1 auto;
border: 1px solid black;
text-align: center;
}
}

25
frontend/src/app/dialogs/share-dialog/share-dialog.component.spec.ts Normal file
View File

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

40
frontend/src/app/dialogs/share-dialog/share-dialog.component.ts Normal file
View File

@ -0,0 +1,40 @@
import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {Region} from '../../interfaces/region.interface';
@Component({
selector: 'app-share-dialog',
templateUrl: './share-dialog.component.html',
styleUrls: ['./share-dialog.component.scss']
})
export class ShareDialogComponent implements OnInit {
@ViewChild('url', {static: false})
urlTextBox: ElementRef;
readonly host = window.location.host;
isCopied = false;
constructor(
public dialogRef: MatDialogRef<ShareDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Region
) {
}
ngOnInit() {
}
onCopy() {
const urlElement: HTMLInputElement = this.urlTextBox.nativeElement;
urlElement.select();
urlElement.setSelectionRange(0, 999); // For mobile devices
document.execCommand('copy');
urlElement.value = 'Copied to Clipboard!';
this.isCopied = true;
}
}