Comment added

frontend/sitcomm/src/app/app-routing.module.ts

@@ -4,7 +4,6 @@ import { LoginComponent } from './login/login.component';
 import { HomeComponent } from './home/home.component';
 import { ProfileComponent } from './profile/profile.component';
 import { GithubComponent } from './github/github.component';
-import { SlackComponent } from './slack/slack.component';
 import { JiraComponent } from './jira/jira.component';
 import { ConfluenceComponent } from './confluence/confluence.component';
 import { ProjectComponent } from './project/project.component';
@@ -13,7 +12,6 @@ const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'profile', component: ProfileComponent },
   { path: 'github', component: GithubComponent },
-  { path: 'slack', component: SlackComponent },
   { path: 'jira', component: JiraComponent },
   { path: 'confluence', component: ConfluenceComponent },
   { path: 'project', component: ProjectComponent},

frontend/sitcomm/src/app/app.module.ts

@@ -19,7 +19,6 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatCardModule } from '@angular/material/card';
 import { ProfileComponent } from './profile/profile.component';
 import { GithubComponent } from './github/github.component';
-import { SlackComponent } from './slack/slack.component';
 import { JiraComponent } from './jira/jira.component';
 import { ConfluenceComponent } from './confluence/confluence.component';
 import { ProjectComponent } from './project/project.component';
@@ -40,7 +39,6 @@ import { LogoutDialog } from './home/home.component';
     HomeComponent,
     ProfileComponent,
     GithubComponent,
-    SlackComponent,
     JiraComponent,
     ConfluenceComponent,
     ProjectComponent,

frontend/sitcomm/src/app/github/github.component.css

-.mat-mdc-list-item-icon {
-  color: rgba(0, 0, 0, 0.54);
-}
 .form-field-css{
     width: 100%;
     height: auto;

frontend/sitcomm/src/app/github/github.component.html

-<!--<mat-list>
-  <div mat-subheader>Folders</div>
-  <mat-list-item *ngFor="let folder of files">
-    <mat-icon matListItemIcon>insert_drive_file</mat-icon>
-    <div matListItemTitle>{{folder.name}}</div>
-    <span matListItemLine>{{folder.commitDate | date}}</span>
-  </mat-list-item>
-</mat-list>
--->
 <mat-accordion>
     <div class="flex-container">
         <h1>

frontend/sitcomm/src/app/github/github.component.ts

@@ -53,23 +53,25 @@ export class GithubComponent implements OnInit {
     return files;
   }
   submitFile(id: string,data: string) {
-    //submit data to server
+    /*
+    Prepare a packet to post data to Backend Server (using Observable).
+    Subscribe using the observable. If data is successfully submitted to backend server. (Not handling if it not submitted).
+    */
     console.log("submitting file");
-    console.log(data);
-    console.log(data.split("\n").length);
     this.postFileChange_stat$ = this.http.post<postFileChangesResponse>(POST_FILE_CHANGE_API,{
       "pid": this.projectId,
       "file_id": id,
       "content": data
     });
     this.postFileChange_stat$.subscribe((data) => {
-      console.log(data);
+      //console.log(data);
     });
     for (let i = 0; i < document.getElementsByClassName("file-text").length; i++) {
       document.getElementsByClassName("file-text")[i].setAttribute("readonly", "true");
     }
   }
   allowEditFile(){
+    //Enable edit of file data
     for (let i = 0; i < document.getElementsByClassName("file-text").length; i++) {
       document.getElementsByClassName("file-text")[i].removeAttribute("readonly");
     }
@@ -78,17 +80,18 @@ export class GithubComponent implements OnInit {
   files: entry[] = this.fetchData(this.projectId);
 
   ngOnInit(): void {
-    //this.projectId = this.fetcherService.getCurrentProjectId();
+    /*
+    Get project ID from Cookie Service. 
+    Prepare a packet to get data from Backend Server (using Observable).
+    Subscribe using the observable. If Status if false (from backend), we use dummy data to display.
+    */
     this.projectId = this.cookieService.get("pid");
     console.log(this.projectId);
     this.getGitFiles_stat$ = this.http.get<getGitFilesResponse>(GET_GIT_FILES_API+'?pid=' +this.projectId);
     this.getGitFiles_stat$.subscribe((data) => {
-      //console.log(data);
       if (data.status == true) {
         this.git_id = data.files[0].git_id;
-        //console.log(this.git_id);
         this.http.get('assets/'+this.git_id, {responseType: 'text'}).subscribe((data) => {
-          //console.log(data);
           var files:entry[] = [];
           var lines = data.split("\n");
           for (let i = 0; i < lines.length; i++) {
@@ -106,5 +109,4 @@ export class GithubComponent implements OnInit {
       }
     });
     }
-
 }
\ No newline at end of file

frontend/sitcomm/src/app/home/home.component.html

 <mat-drawer-container class="example-container" autosize>
-  <!--
-  <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
-    <div class="flex-item nav-btns">
-      <h1 style="justify-content: center;">Go To</h1>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;"class="" [routerLink]="['/github']" mat-raised-button>
-      Github
-    </button>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;" [routerLink]="['/jira']" mat-raised-button>
-      Jira
-    </button>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;"class="" [routerLink]="['/confluence']" mat-raised-button>
-      Confluence
-    </button>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;"class="" [routerLink]="['/slack']" mat-raised-button>
-      Slack
-    </button>
-    </div>
-  </mat-drawer>
-  -->
   <p>
     <mat-toolbar id='nav' color="primary" class="flex-container">
       

frontend/sitcomm/src/app/home/home.component.ts

-import { Component, Inject, inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
-//import { PROJECTS } from './projects';
 import { GET_REPOS_API } from '../urls';
 import { getProjectDetailsResponse } from '../responses';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
-import { PROJECTS } from './projects';
 import { MatDialog, MatDialogRef} from '@angular/material/dialog';
-import { ResourceLoader } from '@angular/compiler';
 
 export interface Tile {
   color: string;
@@ -16,7 +13,9 @@ export interface Tile {
   rows: number;
   text: string;
 }
-
+/**
+ * This component renders the home page.
+ */
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
@@ -35,8 +34,10 @@ export class HomeComponent implements OnInit {
   deleteCookie(kname: string){
     this.cookieService.delete(kname);
   }
+  /*
+  Calculate No of columns for grid
+  */
   calColCount(){
-    //console.log(window.innerWidth);
     if(window.innerWidth > 1000){
       return 3;
     }else if(window.innerWidth > 600){
@@ -45,13 +46,16 @@ export class HomeComponent implements OnInit {
       return 1;
     }
   }
-
+  /* 
+  Opens the Logout DialogBox for Logout Button
+  */
   openLogoutDialog(){
     const dialogRef = this.dialog.open(LogoutDialog);
-    dialogRef.afterClosed().subscribe(result => {
-      console.log('Logout Result:', result)
-    })
   }
+  /*
+   * Get the list of Projects the user have access to.
+   * If the user does not have access to any project return an alert.
+   */
   ngOnInit(): void {
     console.log(this.getCookie('uid'));
     this.project_stat$ = this.http.get<getProjectDetailsResponse>(GET_REPOS_API+'?uid='+ this.getCookie('uid'));
@@ -65,7 +69,7 @@ export class HomeComponent implements OnInit {
           console.log(this.projects);
         } 
         else{
-          alert('Invalid Credentials');
+          alert('No Projects for this User');
         }
       }
     );
@@ -75,6 +79,11 @@ export class HomeComponent implements OnInit {
   ];
 }
 
+/**
+ * This component is responsible for logout dialog box.
+ * If Clicked on cancel it simply closes the dialog.
+ * If Clicked on yes, it clears cookie and redirect to login page.
+ */
 @Component({
   selector: 'logout-dialog',
   templateUrl: './logout-dialog.html',

frontend/sitcomm/src/app/home/projects.ts

-export interface Projects{
-    id: number;
-    name: string;
-    description: string;
-
-}
-
-export const PROJECTS = [
-    {id: 1, name: 'Project 1', description: 'This is project 1', content: 'BLAH BLAH BLAH'},
-    {id: 2, name: 'Project 2', description: 'This is project 2', content: 'BLAH BLAH BLAH'},
-    {id: 3, name: 'Project 3', description: 'This is project 3', content: 'BLAH BLAH BLAH'},
-    {id: 4, name: 'Project 4', description: 'This is project 4', content: 'BLAH BLAH BLAH'},
-    {id: 5, name: 'Project 5', description: 'This is project 5', content: 'BLAH BLAH BLAH'},
-]
\ No newline at end of file

frontend/sitcomm/src/app/login/login.component.ts

@@ -7,7 +7,9 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
 
-
+/**
+ * This component render login page.
+ */
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
@@ -16,18 +18,25 @@ import { Router } from '@angular/router';
 export class LoginComponent implements OnInit {
   email = new FormControl('', [Validators.required, Validators.email]);
   password = new FormControl('', [Validators.required]);
+  //Following observables created to monitor communication of login as well as register with the server.
   login_stat$ = new Observable<LoginResponse>;
   register_stat$ = new Observable<RegisterResponse>;
+  
   getErrorMessage() {
     if (this.email.hasError('required')) {
       return 'You must enter a value';
     }
     return this.email.hasError('email') ? 'Not a valid email' : '';
   }
+  
   constructor(private cookieService: CookieService, private http:HttpClient, private router: Router) {}
+  
+  /**
+   * If login is clicked this function create a response to be posted to backend server with the email and password.
+   * If Authenticated, it will set the cookie for the user.
+   */
   login() {
-    console.log(this.email.value);
-    console.log(this.password.value);
+    
     this.login_stat$ = this.http.post<LoginResponse>(LOGIN_API, {
       email: this.email.value,
       password: this.password.value
@@ -38,7 +47,6 @@ export class LoginComponent implements OnInit {
         if (response.status == true) {
           this.cookieService.set('email', response.email);
           this.cookieService.set('uid',response.uid);
-          //window.location.href = '/home';
           this.router.navigate(['/home']);
         } 
         else{
@@ -46,17 +54,19 @@ export class LoginComponent implements OnInit {
         }
       }
     );
+    
     this.setCookie('email',String(this.email.value));
     this.setCookie('password',String(this.password.value));
     this.setCookie('login','true');
 
   }
-  gotoRegister() {
-    console.log('gotoRegister');
-  }
+
+  /**
+   * If register is clicked this function create a response to be posted to backend server with the email and password.
+   * This will create a new user. Other values such as first name and last need to be modified by user using Profile page.
+   * Newly, regustered user will not have any project under his belt hence will see a blank home page.
+   */
   register(){
-    console.log(this.email.value);
-    console.log(this.password.value);
     this.register_stat$ = this.http.post<RegisterResponse>(REGISTER_API, {
       email: this.email.value,
       password: this.password.value,
@@ -69,7 +79,6 @@ export class LoginComponent implements OnInit {
         console.log(response);
         if (response.status == true) {
           this.cookieService.set('uid', response.uid);
-          //window.location.href = '/home';
           this.router.navigate(['/home']);
         } 
         else{

frontend/sitcomm/src/app/profile/profile.component.ts

 import { Component, OnInit } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import {FormBuilder, FormGroup} from '@angular/forms';
-import { FormControl, Validators } from '@angular/forms';
 import { GET_USER_DETAILS_API, POST_USER_DETAILS_API } from '../urls';
 import { getUserDetailsResponse, postUserDetailsResponse } from '../responses';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
-import { MatDialog, MatDialogRef} from '@angular/material/dialog';
+import { MatDialog} from '@angular/material/dialog';
 import { LogoutDialog } from '../home/home.component';
 
+/**
+ * This component is responsible for maintaining and updating user profile.
+ */
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
@@ -32,27 +34,23 @@ export class ProfileComponent implements OnInit {
   first_name = "";
   last_name = "";
   full_name = "";
-  //edit_first_name = new FormControl('', [Validators.required]);
-  //edit_last_name = new FormControl('', [Validators.required]);
-  //edit_bio = new FormControl('', [Validators.required]);
+
   constructor(private dialog: MatDialog, private cookieService: CookieService,private _formBuilder: FormBuilder, private http:HttpClient, private router: Router) { 
     this.firstFormGroup = this._formBuilder.group({firstCtrl: ['']});
     this.secondFormGroup = this._formBuilder.group({secondCtrl: ['']});
     this.thirdFormGroup = this._formBuilder.group({thirdCtrl: ['']});
   }
 
+  /**
+   * Post User details to backend server.
+   */
   updateProfile(){
-    console.log(this.firstFormGroup.value.firstCtrl);
-    console.log(this.secondFormGroup.value.secondCtrl);
-    console.log(this.thirdFormGroup.value.thirdCtrl);
     this.full_name = this.firstFormGroup.value.firstCtrl.toString();
     this.first_name = this.full_name.split(",")[0];
     this.last_name = this.full_name.split(",")[1];
     this.bio = this.thirdFormGroup.value.thirdCtrl.toString();
     this.profile_img = this.secondFormGroup.value.secondCtrl.toString();
-    //console.log(this.profile_img.split("\\"));
     this.profile_img = this.profile_img.split("\\").slice(-1)[0];
-    //console.log(this.profile_img);
     this.postUser$ = this.http.post<postUserDetailsResponse>(POST_USER_DETAILS_API, {
       uid: this.uid,
       first_name: this.first_name,
@@ -80,11 +78,13 @@ export class ProfileComponent implements OnInit {
     })
   }
 
+  /**
+   * This function get create a get request for given user and get the user details from the backend server.
+   */
   ngOnInit(): void {
     this.getUser$ = this.http.get<getUserDetailsResponse>(GET_USER_DETAILS_API + "?uid=" + this.uid);
     this.getUser$.subscribe(
       (response) => {
-        console.log(response);
         if (response.status == true) {
           this.email = response.user[0].email;
           this.password = response.user[0].password;

frontend/sitcomm/src/app/project/project.component.html

 <mat-drawer-container class="example-container" autosize>
-  <!--
-  <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
-    <div class="flex-item nav-btns">
-      <h1 style="justify-content: center;">Go To</h1>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;"class="" [routerLink]="['/github']" mat-raised-button>
-      Github
-    </button>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;" [routerLink]="['/jira']" mat-raised-button>
-      Jira
-    </button>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;"class="" [routerLink]="['/confluence']" mat-raised-button>
-      Confluence
-    </button>
-    </div>
-    <div class="flex-item nav-btns">
-    <button color="primary" style="width: 100%;"class="" [routerLink]="['/slack']" mat-raised-button>
-      Slack
-    </button>
-    </div>
-  </mat-drawer>
-  -->
   <p>
     <mat-toolbar id='nav' color="primary" class="flex-container">
       <div class="flex-item">

frontend/sitcomm/src/app/project/project.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {Observable, Observer} from 'rxjs';
-import { GithubComponent } from '../github/github.component';
-import { JiraComponent } from '../jira/jira.component';
-import { SlackComponent } from '../slack/slack.component';
-import { ConfluenceComponent } from '../confluence/confluence.component';
+import { Observable, Observer } from 'rxjs';
 import { FetcherService } from '../fetcher.service';
 import { CookieService } from 'ngx-cookie-service';
-import { MatDialog, MatDialogRef} from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { LogoutDialog } from '../home/home.component';
 
 export interface ExampleTab {
@@ -15,6 +10,9 @@ export interface ExampleTab {
   content: string;
 }
 
+/**
+ * Set the tabInd as 1, and the same is being captured by the project component. On the change of event the tabInd is updated and other components are rendered.
+ */
 @Component({
   selector: 'app-project',
   templateUrl: './project.component.html',
@@ -36,11 +34,12 @@ export class ProjectComponent implements OnInit {
           {label: 'Github', content: 'Content 1'},
           {label: 'Confluence', content: 'Content 2'},
           {label: 'JIRA', content: 'Content 3'},
-          //{label: 'Slack', content: 'Content 4'}
         ]);
       }, 1000);
     });
   }
+
+  
   changeTab(event: any) {
     this.tabInd = event.index+1;
   }
@@ -52,6 +51,9 @@ export class ProjectComponent implements OnInit {
     })
   }
 
+  /**
+   * On Initialization, get Project ID from cookie.
+   */
   ngOnInit(): void {
     this.pid = this.cookieService.get('pid');
     if (this.id != undefined && this.pid != this.id.toString()) {

frontend/sitcomm/src/app/slack/slack.component.html

-<p>slack works!</p>

frontend/sitcomm/src/app/slack/slack.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SlackComponent } from './slack.component';
-
-describe('SlackComponent', () => {
-  let component: SlackComponent;
-  let fixture: ComponentFixture<SlackComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SlackComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SlackComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/sitcomm/src/app/slack/slack.component.ts

-import { Component, OnInit } from '@angular/core';
-import {Observable, Observer} from 'rxjs';
-import { FetcherService } from '../fetcher.service';
-
-@Component({
-  selector: 'app-slack',
-  templateUrl: './slack.component.html',
-  styleUrls: ['./slack.component.css']
-})
-export class SlackComponent implements OnInit {
-  projectId = NaN;
-  constructor(private fetcherService: FetcherService) { }
-
-  ngOnInit(): void {
-    this.projectId = this.fetcherService.getCurrentProjectId();
-  }
-
-}