Add share button

frontend/src/app/app.module.ts

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

frontend/src/app/components/region/region.component.html

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

frontend/src/app/components/result/result.component.html

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

frontend/src/app/components/share-button/share-button.component.html

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

frontend/src/app/components/share-button/share-button.component.spec.ts

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

frontend/src/app/components/share-button/share-button.component.ts

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

frontend/src/app/containers/region-details/region-details.component.html

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

frontend/src/app/dialogs/share-dialog/share-dialog.component.html

@@ -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>
+

frontend/src/app/dialogs/share-dialog/share-dialog.component.scss

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

frontend/src/app/dialogs/share-dialog/share-dialog.component.spec.ts

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

frontend/src/app/dialogs/share-dialog/share-dialog.component.ts

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