[frontend] Add twitter info dialog wiring
This commit is contained in:
parent
3cd7131191
commit
43151b23d0
|
@ -0,0 +1 @@
|
||||||
|
<p>twitter-dialog works!</p>
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TwitterDialogComponent } from './twitter-dialog.component';
|
||||||
|
|
||||||
|
describe('TwitterDialogComponent', () => {
|
||||||
|
let component: TwitterDialogComponent;
|
||||||
|
let fixture: ComponentFixture<TwitterDialogComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [TwitterDialogComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TwitterDialogComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-twitter-dialog',
|
||||||
|
templateUrl: './twitter-dialog.component.html',
|
||||||
|
styleUrls: ['./twitter-dialog.component.scss'],
|
||||||
|
})
|
||||||
|
export class TwitterDialogComponent implements OnInit {
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
ngOnInit(): void {}
|
||||||
|
}
|
|
@ -0,0 +1,42 @@
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
|
||||||
|
magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
|
||||||
|
sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
|
||||||
|
neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
|
||||||
|
Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
|
||||||
|
pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
|
||||||
|
Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
|
||||||
|
sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
|
||||||
|
convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
|
||||||
|
in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
|
||||||
|
eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
|
||||||
|
justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
|
||||||
|
egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
|
||||||
|
neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
|
||||||
|
sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
|
||||||
|
risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
|
||||||
|
sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
|
||||||
|
aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
|
||||||
|
felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
|
||||||
|
senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
|
||||||
|
ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
|
||||||
|
scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
|
||||||
|
ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
|
||||||
|
Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
|
||||||
|
ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
|
||||||
|
quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
|
||||||
|
bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
|
||||||
|
Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
|
||||||
|
hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
|
||||||
|
Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
|
||||||
|
congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
|
||||||
|
tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
|
||||||
|
maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
|
||||||
|
eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
|
||||||
|
commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
|
||||||
|
sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
|
||||||
|
lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
|
||||||
|
arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
|
||||||
|
Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
|
||||||
|
mollis.
|
||||||
|
</p>
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TwitterInfoDialogComponent } from './twitter-info-dialog.component';
|
||||||
|
|
||||||
|
describe('TwitterInfoDialogComponent', () => {
|
||||||
|
let component: TwitterInfoDialogComponent;
|
||||||
|
let fixture: ComponentFixture<TwitterInfoDialogComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [TwitterInfoDialogComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TwitterInfoDialogComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-twitter-info-dialog',
|
||||||
|
templateUrl: './twitter-info-dialog.component.html',
|
||||||
|
styleUrls: ['./twitter-info-dialog.component.scss'],
|
||||||
|
})
|
||||||
|
export class TwitterInfoDialogComponent implements OnInit {
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
ngOnInit(): void {}
|
||||||
|
}
|
|
@ -5,7 +5,12 @@
|
||||||
Twitter
|
Twitter
|
||||||
</div>
|
</div>
|
||||||
<button mat-icon-button aria-label="How to use">
|
<button mat-icon-button aria-label="How to use">
|
||||||
<mat-icon matTooltip="How to use" class="info-button">info</mat-icon>
|
<mat-icon
|
||||||
|
matTooltip="How to add an twitter account to your hood"
|
||||||
|
class="info-button"
|
||||||
|
(click)="onInfoClick()"
|
||||||
|
>info</mat-icon
|
||||||
|
>
|
||||||
</button>
|
</button>
|
||||||
</mat-card-title>
|
</mat-card-title>
|
||||||
</mat-card-header>
|
</mat-card-header>
|
||||||
|
@ -20,7 +25,7 @@
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
<mat-list-item *ngFor="let twitter of twitters">
|
<mat-list-item *ngFor="let twitter of twitters">
|
||||||
<div class="entry">
|
<div class="entry">
|
||||||
Twitterdummy
|
@{{ twitter.username }}
|
||||||
<mat-slide-toggle></mat-slide-toggle>
|
<mat-slide-toggle></mat-slide-toggle>
|
||||||
<button
|
<button
|
||||||
mat-icon-button
|
mat-icon-button
|
||||||
|
@ -34,10 +39,6 @@
|
||||||
</mat-list-item>
|
</mat-list-item>
|
||||||
</mat-list>
|
</mat-list>
|
||||||
<mat-menu #menu="matMenu">
|
<mat-menu #menu="matMenu">
|
||||||
<button mat-menu-item>
|
|
||||||
<mat-icon>edit</mat-icon>
|
|
||||||
<span>Edit</span>
|
|
||||||
</button>
|
|
||||||
<button mat-menu-item>
|
<button mat-menu-item>
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>delete</mat-icon>
|
||||||
<span>Delete</span>
|
<span>Delete</span>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { TwitterService } from 'src/app/core/api';
|
import { TwitterService } from 'src/app/core/api';
|
||||||
|
import { TwitterInfoDialogComponent } from '../twitter-info-dialog/twitter-info-dialog.component';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-twitter-settings',
|
selector: 'app-twitter-settings',
|
||||||
|
@ -11,9 +13,16 @@ export class TwitterSettingsComponent implements OnInit {
|
||||||
@Input() hoodId;
|
@Input() hoodId;
|
||||||
twitters$: Observable<Array<any>>;
|
twitters$: Observable<Array<any>>;
|
||||||
|
|
||||||
constructor(private twitterService: TwitterService) {}
|
constructor(
|
||||||
|
private twitterService: TwitterService,
|
||||||
|
public dialog: MatDialog
|
||||||
|
) {}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.twitters$ = this.twitterService.getTwitters(this.hoodId);
|
this.twitters$ = this.twitterService.getTwitters(this.hoodId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onInfoClick() {
|
||||||
|
this.dialog.open(TwitterInfoDialogComponent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue