Add topic creation, subscription editing

src/app/dashboard/dashboard.module.ts

@@ -16,6 +16,7 @@ import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
 import { TopicsEditComponent } from './topics-edit.component';
+import { SubscriptionsUpdateComponent } from './subscriptions-edit.component';
 import { SendPushNotificationComponent } from './send-push-notification.component';
 import { TransactionLogComponent } from './transaction-log.component';
 import { CategoryMonthComponent } from './category-month.component';
@@ -88,6 +89,7 @@ import { environment } from '../../environments/environment';
     TrailMapComponent,
     FeedbackComponent,
     TopicsEditComponent,
+    SubscriptionsUpdateComponent,
     SendPushNotificationComponent,
     GraphWidget,
     OrgBarSnippetComponent,

src/app/dashboard/dashboard.routing.ts

@@ -20,6 +20,7 @@ import { TrailMapComponent } from './trail-map.component';
 import { MoreStuffComponent } from './more-graphs-and-tables.component';
 import { SuppliersComponent } from './suppliers.component';
 import { TopicsEditComponent } from './topics-edit.component';
+import { SubscriptionsUpdateComponent } from './subscriptions-edit.component';
 import { SendPushNotificationComponent } from './send-push-notification.component';
 
 // Using child path to allow for FullLayout theming
@@ -64,8 +65,8 @@ const routes: Routes = [
       },
       {
         path: 'edit-subscriptions',
-        component: SubscriptionsEditComponent,
+        component: SubscriptionsUpdateComponent,
-        data: { title: 'Edit Subscriptions' },
+        data: { title: 'Update Subscriptions' },
       },
       {
         path: 'leaderboard',

src/app/dashboard/subscriptions-edit.component.html

@@ -0,0 +1,62 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-6 col-md-8">
+      <div class="card">
+        <div class="card-header">
+          <strong>View Subscriptions</strong>
+          <small>Required Data marked in <strong>bold</strong>.</small>
+        </div>
+        <form class="form-horizontal" [formGroup]="updateSubscriptionsForm" (ngSubmit)="onSubmit()">
+          <div class="card-block">
+            <div class="form-group row">
+            	<fieldset>      
+        				<div class="col-md-9">
+		      				<div *ngFor="let topic of topicList" class="input-group">
+						        <input 
+						        	type="checkbox" 
+						        	class="mr-1"
+						        	[id]="topic.id"
+						        	[value]="topic.id"
+						        	[name]="topic.name"
+						        	[checked]="topic.isSubscribed"
+						        	(change)="onCheckChange($event)"
+						       	>
+						       	<label class="label--valign" [for]="topic.id">{{ topic.name }}</label>
+				         	</div>
+				        </div>
+		         	</fieldset>
+		           	
+              <!--
+              For reasons unknown, this fails to correctly set the selected options (it selects nothing)
+              when `[selected]="topicList[topic].isSubscribed"` or `"!!topicList[topic].isSubscribed"`,
+              but when `"!topicLIst[topic].isSubscribed"` is the test it will happily select all of the
+              incorrect ones. I've bodged it with checkboxes for now instead.
+              
+              <select required class="form-control" type="text" formControlName="topicSubscriptions" multiple>
+                <option *ngFor="let topic of topicIdList" [ngValue]="topicList[topic].name" [selected]="topicList[topic].isSubscribed">
+                {{ topicList[topic].name }} <strong>({{topicList[topic].numberOfSubscribers}} subscribers)</strong>
+                </option>
+              </select>
+              -->
+            </div>
+            <div class="form-group row">
+              <div class="col-md-9">
+                <div [ngSwitch]="updateSubscriptionsFormStatus">
+                  <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
+                    Subscriptions have been updated successfully!
+                  </div>
+                  <div *ngSwitchCase="'update_failed'" class="alert alert-danger" role="alert">
+                    {{updateSubscriptionsFormError}}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <button type="submit" [disabled]="!updateSubscriptionsForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Update</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div><!--/.row-->
+</div>

src/app/dashboard/subscriptions-edit.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators, FormArray, FormBuilder } from '@angular/forms';
+import { ApiService } from '../providers/api-service';
+
+@Component({
+  templateUrl: 'subscriptions-edit.component.html',
+})
+export class SubscriptionsUpdateComponent implements OnInit {
+  updateSubscriptionsForm: FormGroup;
+  updateSubscriptionsFormStatus: string;
+  updateSubscriptionsFormStatusSuccess: string;
+  updateSubscriptionsFormStatusError = 'Error received, please try again.';
+  topicList: any;
+  topicIdList: any;
+	
+	get topicsFormArray() {
+    return this.updateSubscriptionsForm.controls.topicSubscriptions as FormArray;
+  }
+  
+  constructor(private api: ApiService, private formBuilder: FormBuilder) {
+		this.api.getTopicsAndSubscriptions().subscribe(
+      result => {
+      	if (result.topics.length > 0) {
+		      this.topicList = result.topics;
+		      this.topicIdList = Object.keys(this.topicList);
+		      					
+					this.topicList.forEach((topic) => this.topicsFormArray.push(new FormControl({
+						id: topic.id,
+						name: topic.name,
+						isSubscribed: !!topic.isSubscribed
+					})));
+		    } else {
+		    	console.warn('No topics returned from server');
+		    }
+      },
+      error => {
+        console.error('Couldn\'t get topics');
+        console.error(error._body);
+      }
+    );		
+    
+    this.updateSubscriptionsForm = this.formBuilder.group({
+			topicSubscriptions: new FormArray([])
+		});
+  }
+  
+	ngOnInit(): void {
+  }
+  
+  onCheckChange(event): void {
+  	const topicIndex = this.topicsFormArray.value.findIndex((obj => obj.id == event.target.id));
+  	this.topicsFormArray.value[topicIndex].isSubscribed = !this.topicsFormArray.value[topicIndex].isSubscribed;
+  }
+
+  onSubmit(): void {
+  	console.debug(this.updateSubscriptionsForm.controls.topicSubscriptions.value);
+  	
+    this.api
+      .updateSubscriptions({ topicSubscriptions: this.updateSubscriptionsForm.controls.topicSubscriptions.value })
+      .subscribe(
+        results => {
+          console.debug('Subscriptions successfully updated.');
+          this.updateSubscriptionsFormStatus = 'success';
+        },
+        error => {
+          console.error('Subscriptions update failed.');
+          try {
+            this.updateSubscriptionsFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
+          } catch (e) {
+            this.updateSubscriptionsFormStatusError = 'There was a server error, please try again later.';
+          }
+          this.updateSubscriptionsFormStatus = 'update_failed';
+        }
+      );
+  }
+}

src/app/dashboard/topics-edit.component.html

@@ -20,7 +20,7 @@
                   <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
                     Topic has been created successfully!
                   </div>
-                  <div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
+                  <div *ngSwitchCase="'create_failed'" class="alert alert-danger" role="alert">
                     {{createTopicFormStatusError}}
                   </div>
                 </div>

src/app/dashboard/topics-edit.component.ts

@@ -5,7 +5,7 @@ import { ApiService } from '../providers/api-service';
 @Component({
   templateUrl: 'topics-edit.component.html',
 })
-export class TopicsEditComponen {
+export class TopicsEditComponent {
   createTopicForm: FormGroup;
   loggedInEmail: string;
   createTopicFormStatus: string;

src/app/layouts/full-layout.component.html

@@ -68,6 +68,14 @@
             </div>
           </a>
         </li>
+        <li *ngIf="accountType == 'customer'" class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/edit-subscriptions']">
+            <div class="row no-gutters align-items-center">
+              <div class="col-2"><i class="icon-feed"></i></div>
+              <div class="col-10">Topic Subscriptions</div>
+            </div>
+          </a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
             <div class="row no-gutters align-items-center">

src/app/providers/api-service.ts

@@ -147,8 +147,26 @@ export class ApiService {
       { session_key : key }
     );
   }
+  
+  public getTopicsAndSubscriptions() {
+    const key = this.sessionKey;
+    return this.http.post<any>(
+      this.apiUrl + '/topics/subscriptions',
+      { session_key : key }
+    );
+  }
+  
+  public updateSubscriptions(data) {
+    data.session_key = this.sessionKey;
+    data.test = "Foo";
+    return this.http.post<any>(
+      this.apiUrl + '/topics/update',
+      data
+    );
+  }
 
   public sendMessage(data) {
+    data.session_key = this.sessionKey;
     data.sender = localStorage.getItem('displayname');
     return this.http.post<any>(
       this.apiUrl + '/send-message',

src/app/service/messaging.service.ts

@@ -51,6 +51,7 @@ export class MessagingService {
         result => {
           if (result.exists) { 
           	console.debug('Device already registered.'); 
+            localStorage.setItem('devicetoken', token);
           } else {
             this.api.addDeviceToken({'token': token, 'email': localStorage.getItem('email')}).subscribe(
               result => {

src/scss/_custom.scss

@@ -132,3 +132,7 @@ agm-map {
     }
   }
 }
+
+.label--valign {
+	margin-top: 0.5rem;
+}