fix #80
This commit is contained in:
parent
1e8e3201df
commit
c42d23cd35
|
@ -1,7 +1,8 @@
|
||||||
<div class="my-account__body flexcroll">
|
<div class="my-account__body flexcroll">
|
||||||
<h4 class="my-account__label">add column:</h4>
|
<h4 class="my-account__label">add column:</h4>
|
||||||
<a class="my-account__link my-account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
|
<a class="my-account__link my-account__blue" href *ngFor="let stream of availableStreams"
|
||||||
{{ stream.name }}
|
(click)="addStream(stream)" title="{{ stream.isAdded ? '' : 'add stream'}}" [class.my-account__link--disabled]="stream.isAdded">
|
||||||
|
{{ stream.name }} <fa-icon class="my-account__link--icon" *ngIf="stream.isAdded" [icon]="faCheckSquare"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
<h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
|
<h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
|
||||||
<a class="my-account__link my-account__red" href (click)="removeAccount()">
|
<a class="my-account__link my-account__red" href (click)="removeAccount()">
|
||||||
|
|
|
@ -20,18 +20,6 @@
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
color: $font-color-secondary;
|
color: $font-color-secondary;
|
||||||
}
|
}
|
||||||
&__link {
|
|
||||||
text-decoration: none;
|
|
||||||
display: block; // width: calc(100% - 20px);
|
|
||||||
width: 100%; // height: 30px;
|
|
||||||
padding: 5px 10px; // border: solid 1px black;
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&__margin-top {
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
&__blue {
|
&__blue {
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -47,4 +35,26 @@
|
||||||
background-color: lighten($red-button-color, 15);
|
background-color: lighten($red-button-color, 15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&__link {
|
||||||
|
text-decoration: none;
|
||||||
|
display: block; // width: calc(100% - 20px);
|
||||||
|
width: 100%; // height: 30px;
|
||||||
|
padding: 5px 10px; // border: solid 1px black;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
&--icon {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
cursor: default;
|
||||||
|
background-color: darken($color-primary, 4);
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($color-primary, 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__margin-top {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,5 +1,7 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
|
||||||
import { Store } from '@ngxs/store';
|
import { Observable, Subscription } from 'rxjs';
|
||||||
|
import { Store, Select } from '@ngxs/store';
|
||||||
|
import { faCheckSquare } from "@fortawesome/free-regular-svg-icons";
|
||||||
|
|
||||||
import { NotificationService } from '../../../../services/notification.service';
|
import { NotificationService } from '../../../../services/notification.service';
|
||||||
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state';
|
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state';
|
||||||
|
@ -12,11 +14,24 @@ import { NavigationService } from '../../../../services/navigation.service';
|
||||||
templateUrl: './my-account.component.html',
|
templateUrl: './my-account.component.html',
|
||||||
styleUrls: ['./my-account.component.scss']
|
styleUrls: ['./my-account.component.scss']
|
||||||
})
|
})
|
||||||
export class MyAccountComponent implements OnInit {
|
export class MyAccountComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
|
faCheckSquare = faCheckSquare;
|
||||||
|
|
||||||
availableStreams: StreamElement[] = [];
|
availableStreams: StreamWrapper[] = [];
|
||||||
|
|
||||||
@Input() account: AccountWrapper;
|
private _account: AccountWrapper;
|
||||||
|
@Input('account')
|
||||||
|
set account(acc: AccountWrapper) {
|
||||||
|
this._account = acc;
|
||||||
|
this.loadStreams(acc);
|
||||||
|
}
|
||||||
|
get account(): AccountWrapper {
|
||||||
|
return this._account;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
|
||||||
|
private streamChangedSub: Subscription;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly store: Store,
|
private readonly store: Store,
|
||||||
|
@ -24,19 +39,41 @@ export class MyAccountComponent implements OnInit {
|
||||||
private notificationService: NotificationService) { }
|
private notificationService: NotificationService) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
const instance = this.account.info.instance;
|
this.streamChangedSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
|
||||||
this.availableStreams.length = 0;
|
this.loadStreams(this.account);
|
||||||
this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', this.account.info.id, null, null, instance));
|
});
|
||||||
this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null, instance));
|
|
||||||
this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Home', this.account.info.id, null, null, instance));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addStream(stream: StreamElement): boolean {
|
ngOnDestroy(): void {
|
||||||
if (stream) {
|
if(this.streamChangedSub) {
|
||||||
|
this.streamChangedSub.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadStreams(account: AccountWrapper){
|
||||||
|
const instance = account.info.instance;
|
||||||
|
this.availableStreams.length = 0;
|
||||||
|
this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', account.info.id, null, null, instance)));
|
||||||
|
this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.local, 'Local Timeline', account.info.id, null, null, instance)));
|
||||||
|
this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.personnal, 'Home', account.info.id, null, null, instance)));
|
||||||
|
|
||||||
|
const loadedStreams = <StreamElement[]>this.store.snapshot().streamsstatemodel.streams;
|
||||||
|
this.availableStreams.forEach(s => {
|
||||||
|
if(loadedStreams.find(x => x.id === s.id)){
|
||||||
|
s.isAdded = true;
|
||||||
|
} else {
|
||||||
|
s.isAdded = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addStream(stream: StreamWrapper): boolean {
|
||||||
|
if (stream && !stream.isAdded) {
|
||||||
this.store.dispatch([new AddStream(stream)]).toPromise()
|
this.store.dispatch([new AddStream(stream)]).toPromise()
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.notificationService.notify(`stream added`, false);
|
stream.isAdded = true;
|
||||||
});
|
//this.notificationService.notify(`stream added`, false);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -48,3 +85,11 @@ export class MyAccountComponent implements OnInit {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class StreamWrapper extends StreamElement {
|
||||||
|
constructor(stream: StreamElement) {
|
||||||
|
super(stream.type, stream.name, stream.accountId, stream.tag, stream.list, stream.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
isAdded: boolean;
|
||||||
|
}
|
Loading…
Reference in New Issue