enable/disable feed

AlfrescoArchive · Jun 7, 2018 · a5ff466 · a5ff466
1 parent 1a15191
commit a5ff466
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 83 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,12 @@
-
 <mat-toolbar>
   <mat-toolbar-row>
     <span>{{title}}</span>
     <span class="header-spacer"></span>
+    <mat-slide-toggle
+      [(ngModel)]="statusCampaign"
+      (change)="switchCampaign($event)">
+      Switch Campaign
+    </mat-slide-toggle>
     <fa name="twitter" animation="spin"></fa>
   </mat-toolbar-row>
 </mat-toolbar>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TwitterClientService } from './services/twitter-client.service';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,32 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'Twitter Campaigns';
+
+  statusCampaign = false;
+
+  constructor(private twitterClientService: TwitterClientService) {
+    this.twitterClientService.statusCampaign().subscribe((data: any) => {
+      this.statusCampaign = !data;
+    });
+  }
+
+  switchCampaign(event) {
+    if (event.checked) {
+      this.startCampaign();
+    } else {
+      this.stopCampaign();
+    }
+  }
+
+  startCampaign() {
+    this.twitterClientService.startCampaign().subscribe((data: any) => {
+      console.log(data);
+    });
+  }
+
+  stopCampaign() {
+    this.twitterClientService.stopCampaign().subscribe((data: any) => {
+      console.log(data);
+    });
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -16,7 +16,8 @@ import {
   MatToolbarModule,
   MatCardModule,
   MatIconModule,
-  MatGridListModule
+  MatGridListModule,
+  MatSlideToggleModule
 } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -40,7 +41,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     MatTableModule,
     MatSortModule,
     MatGridListModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatSlideToggleModule
   ],
   providers: [
     TwitterClientService

diff --git a/src/app/services/twitter-client.service.ts b/src/app/services/twitter-client.service.ts
@@ -34,4 +34,16 @@ export class TwitterClientService {
   getRewardsTweets(id: String): Observable<any> {
     return this.http.get(this.BASE_URL + '/ttc-connectors-reward/rewards/' + id);
   }
+
+  startCampaign(): Observable<any> {
+    return this.http.post(this.BASE_URL + '/ttc-connectors-dummytwitter/feed/stop', null);
+  }
+
+  stopCampaign(): Observable<any> {
+    return this.http.post(this.BASE_URL + '/ttc-connectors-dummytwitter/feed/start', null);
+  }
+
+  statusCampaign(): Observable<any> {
+    return this.http.get(this.BASE_URL + '/ttc-connectors-dummytwitter/feed');
+  }
 }
diff --git a/src/app/twitter-campaign-details/twitter-campaign-details.component.html b/src/app/twitter-campaign-details/twitter-campaign-details.component.html
@@ -1,3 +1,80 @@
+
+<mat-grid-list cols="1" rowHeight="60">
+  <mat-grid-tile>
+
+    <mat-card class="processed">Processed Feeds
+      <mat-icon class="align-right">repeat</mat-icon>
+    </mat-card>
+
+  </mat-grid-tile>
+</mat-grid-list>
+
+<mat-grid-list cols="1" rowHeight="200">
+  <mat-grid-tile class="list">
+
+    <div *ngIf="!isProcessedFeedsLoading && !processedFeeds" class="status">
+      <div class="status-icon">
+        <mat-icon>error_outline</mat-icon>
+      </div>
+      <div class="status-message">
+        Service Unavailable
+      </div>
+    </div>
+
+    <div *ngIf="isProcessedFeedsEmpty()" class="status">
+      <div class="status-icon">
+        <mat-icon>format_align_justify</mat-icon>
+      </div>
+      <div class="status-message">
+        Empty Feed
+      </div>
+    </div>
+
+    <div *ngIf="isProcessedFeedsLoading" class="status">
+      <div class="status-icon">
+        <fa name="spinner" animation="spin"></fa>
+      </div>
+      <div class="status-message">
+        Loading
+      </div>
+    </div>
+
+    <table mat-table *ngIf="processedFeeds && !isProcessedFeedsEmpty()" [dataSource]="processedFeeds" matSort class="mat-elevation-z8">
+
+      <ng-container matColumnDef="text">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Text</th>
+        <td mat-cell *matCellDef="let element"> {{element.entry.text}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="author">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Author</th>
+        <td mat-cell *matCellDef="let element"> {{element.entry.author}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="lang">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Lang</th>
+        <td mat-cell *matCellDef="let element"> {{element.entry.lang}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="attitude">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Attitude</th>
+        <td mat-cell *matCellDef="let element"> {{element.entry.attitude}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="timestamp">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Timestamp</th>
+        <td mat-cell *matCellDef="let element"> {{element.entry.timestamp}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumnsProcessed"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsProcessed;"></tr>
+    </table>
+
+  </mat-grid-tile>
+</mat-grid-list>
+
+<br><br>
+
 <mat-grid-list cols="3" rowHeight="60">
   <mat-grid-tile>
 
@@ -170,80 +247,6 @@
 
 <br><br>
 
-<mat-grid-list cols="1" rowHeight="60">
-  <mat-grid-tile>
-
-    <mat-card class="processed">Processed Feeds
-      <mat-icon class="align-right">repeat</mat-icon>
-    </mat-card>
-
-  </mat-grid-tile>
-</mat-grid-list>
-
-<mat-grid-list cols="1">
-  <mat-grid-tile class="list">
-
-    <div *ngIf="!isProcessedFeedsLoading && !processedFeeds" class="status">
-      <div class="status-icon">
-        <mat-icon>error_outline</mat-icon>
-      </div>
-      <div class="status-message">
-        Service Unavailable
-      </div>
-    </div>
-
-    <div *ngIf="isProcessedFeedsEmpty()" class="status">
-      <div class="status-icon">
-        <mat-icon>format_align_justify</mat-icon>
-      </div>
-      <div class="status-message">
-        Empty Feed
-      </div>
-    </div>
-
-    <div *ngIf="isProcessedFeedsLoading" class="status">
-      <div class="status-icon">
-        <fa name="spinner" animation="spin"></fa>
-      </div>
-      <div class="status-message">
-        Loading
-      </div>
-    </div>
-
-
-    <table mat-table *ngIf="processedFeeds && !isProcessedFeedsEmpty()" [dataSource]="processedFeeds" matSort class="mat-elevation-z8">
-
-      <ng-container matColumnDef="text">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Text</th>
-        <td mat-cell *matCellDef="let element"> {{element.entry.text}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="author">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Author</th>
-        <td mat-cell *matCellDef="let element"> {{element.entry.author}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="lang">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Lang</th>
-        <td mat-cell *matCellDef="let element"> {{element.entry.lang}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="attitude">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Attitude</th>
-        <td mat-cell *matCellDef="let element"> {{element.entry.attitude}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="timestamp">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Timestamp</th>
-        <td mat-cell *matCellDef="let element"> {{element.entry.timestamp}}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumnsProcessed"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumnsProcessed;"></tr>
-    </table>
-
-  </mat-grid-tile>
-</mat-grid-list>
 
 
 <mat-grid-list cols="1" rowHeight="60">
@@ -256,7 +259,7 @@
   </mat-grid-tile>
 </mat-grid-list>
 
-<mat-grid-list cols="1">
+<mat-grid-list cols="1" rowHeight="200">
   <mat-grid-tile class="list">
 
     <div *ngIf="!isRewardFeedsLoading && !rewardFeeds" class="status">
@@ -286,7 +289,6 @@
       </div>
     </div>
 
-
     <table mat-table *ngIf="rewardFeeds && !isRewardFeedsEmpty()" [dataSource]="rewardFeeds" matSort class="mat-elevation-z8">
 
       <ng-container matColumnDef="campaignName">
@@ -319,3 +321,4 @@
     </table>
 
   </mat-grid-tile>
+</mat-grid-list>
diff --git a/src/app/twitter-campaign-details/twitter-campaign-details.component.ts b/src/app/twitter-campaign-details/twitter-campaign-details.component.ts
@@ -14,7 +14,7 @@ export class TwitterCampaignDetailsComponent implements OnInit {
 
   displayedColumns = ['nroOfTweets', 'userName'];
   displayedColumnsProcessed = ['text', 'author', 'lang', 'attitude', 'timestamp'];
-  displayedColumnsReward: ['campaignName', 'nroOfTweets', 'userName', 'rewardsText', 'rewardDate'];
+  displayedColumnsReward = ['campaignName', 'nroOfTweets', 'userName', 'rewardsText', 'rewardDate'];
 
   negativeFeeds: any;
   positiveFeeds: any;

diff --git a/src/app/twitter-campaigns/twitter-campaigns.component.css b/src/app/twitter-campaigns/twitter-campaigns.component.css
@@ -6,3 +6,26 @@
   background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
   background-size: cover;
 }
+
+.status-icon mat-icon {
+  height: 150px !important;
+  width: 150px !important;
+  font-size: 106px !important;
+}
+
+.status-icon fa {
+  height: 150px !important;
+  width: 150px !important;
+  font-size: 106px !important;
+}
+
+.status {
+  text-align: center;
+  font-size: 27px;
+  font-family: sans-serif;
+  padding: 50px 50px 50px 50px;
+}
+
+.status-message {
+
+}
diff --git a/src/app/twitter-campaigns/twitter-campaigns.component.html b/src/app/twitter-campaigns/twitter-campaigns.component.html
@@ -1,14 +1,42 @@
-<mat-card class="example-card"  *ngFor="let campaign of campaigns">
+<mat-card class="example-card" *ngFor="let campaign of campaigns">
   <mat-card-header>
     <mat-card-title>{{campaign.name}}</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <p>
-        {{campaign.serviceId}} - {{campaign.name}} -  {{campaign.lang}}
-        Twitter Campaign
+      {{campaign.serviceId}} - {{campaign.name}} - {{campaign.lang}}
+      Twitter Campaign
     </p>
   </mat-card-content>
   <mat-card-actions>
     <button mat-button (click)="openCampaign(campaign)">OPEN</button>
   </mat-card-actions>
 </mat-card>
+
+
+<div *ngIf="!isCampaignsLoading && !campaigns" class="status">
+  <div class="status-icon">
+    <mat-icon>error_outline</mat-icon>
+  </div>
+  <div class="status-message">
+    Service Unavailable
+  </div>
+</div>
+
+<div *ngIf="isCampaignsLoading" class="status">
+  <div class="status-icon">
+    <fa name="spinner" animation="spin"></fa>
+  </div>
+  <div class="status-message">
+    Loading
+  </div>
+</div>
+
+<div *ngIf="isCampaignEmpty()" class="status">
+  <div class="status-icon">
+    <mat-icon>format_align_justify</mat-icon>
+  </div>
+  <div class="status-message">
+    No Campaign Available
+  </div>
+</div>
diff --git a/src/app/twitter-campaigns/twitter-campaigns.component.ts b/src/app/twitter-campaigns/twitter-campaigns.component.ts
@@ -11,10 +11,14 @@ export class TwitterCampaignsComponent implements OnInit {
 
   campaigns: any[];
 
+  isCampaignsLoading = true;
+
   constructor(private twitterClientService: TwitterClientService, private router: Router) {
     twitterClientService.getCampaigns().subscribe((data: any[]) => {
         this.campaigns = data;
+        this.isCampaignsLoading = false;
       }, error => {
+        this.isCampaignsLoading = false;
         console.log(error);
       }
     );
@@ -27,4 +31,11 @@ export class TwitterCampaignsComponent implements OnInit {
     this.router.navigate(['/campaigns', campaign.name]);
   }
 
+  isCampaignEmpty() {
+    if (this.campaigns && this.campaigns.length === 0 && !this.isCampaignsLoading) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 }