Complaints

package.json

@@ -35,7 +35,7 @@
     "fuse.js": "^3.3.0",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
-    "moment": "^2.22.2",
+    "moment": "^2.24.0",
     "ngx-flyout": "^1.0.0",
     "ngx-img-fallback": "^1.3.3",
     "ngx-markdown": "^7.0.2",
@@ -46,10 +46,10 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.2",
-    "@angular/cli": "^7.1.2",
-    "@angular/compiler-cli": "^7.1.3",
-    "@angular/language-service": "^7.1.3",
+    "@angular-devkit/build-angular": "^0.13.0",
+    "@angular/cli": "^7.0.2",
+    "@angular/compiler-cli": "^7.0.0",
+    "@angular/language-service": "^7.0.0",
     "@angularclass/hmr": "^2.1.3",
     "@types/node": "~10.12.12",
     "codelyzer": "^4.5.0",

src/api.ts

@@ -39,5 +39,14 @@ export const API = {
     NotificationsAllRead: 'api/notifications/read',
     WebPushSubscribe: 'api/user-me/subscribe-wp',
 
-    UserTags: 'api/user-tags'
+    UserTags: 'api/user-tags',
+
+    Complaints: 'api/venter/complaints',
+    MyComplaints: 'api/venter/complaints?filter=me',
+    Complaint: 'api/venter/complaints/{complaintId}',
+    UpVote: 'api/venter/complaints/{complaintId}/upvote{?action}',
+    CommentPost: 'api/venter/complaints/{complaintId}/comments',
+    CommentEdit: 'api/venter/comments/{commentId}',
+    TagCategories: 'api/venter/tags',
+    SubscribeToComplaint: 'api/venter/complaints/{complaintId}/subscribe{?action}'
 };

src/app/app.module.ts

@@ -58,6 +58,22 @@ import { RedirComponent } from './redir/redir.component';
 import { UpdateRoleComponent } from './update-role/update-role.component';
 import { CardComponent } from './card/card.component';
 
+import { ComplaintsHomeComponent } from './venter/complaints-home/complaints-home.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FileComplaintComponent } from './venter/file-complaint/file-complaint.component';
+import { MatInputModule } from '@angular/material';
+import { AgmCoreModule } from '@agm/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material';
+import { DetailedComplaintComponent } from './venter/detailed-complaint/detailed-complaint.component';
+import { MatDividerModule } from '@angular/material/divider';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -91,7 +107,10 @@ import { CardComponent } from './card/card.component';
     NotifyCardComponent,
     RedirComponent,
     UpdateRoleComponent,
-    CardComponent
+    CardComponent,
+    ComplaintsHomeComponent,
+    FileComplaintComponent,
+    DetailedComplaintComponent,
   ],
   imports: [
     BrowserModule,
@@ -100,6 +119,21 @@ import { CardComponent } from './card/card.component';
     HttpClientModule,
     FormsModule,
     BrowserAnimationsModule,
+    AgmCoreModule.forRoot({
+      apiKey: 'AIzaSyCKNBwrs1UdT2s1jwqOypSzas9Z4s6h4B0'
+    }),
+
+    MatTabsModule,
+    MatCardModule,
+    MatGridListModule,
+    MatListModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    MatChipsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatDividerModule,
 
     ImgFallbackModule,
     MarkdownModule.forRoot(),
@@ -121,6 +155,10 @@ import { CardComponent } from './card/card.component';
       { path: 'settings', component: SettingsComponent, data: { state: 'base' } },
       { path: 'about', component: AboutComponent, data: { state: 'overlay' } },
 
+      { path: 'venter/complaints-home', component: ComplaintsHomeComponent, data: { state: 'base' } },
+      { path: 'venter/file-complaint', component: FileComplaintComponent, data: { state: 'base' } },
+      { path: 'venter/detailed-complaint/:id', component: DetailedComplaintComponent, data: { state: 'base' } },
+
       { path: 'add-event', component: AddEventComponent, data: { state: 'overlay' }, canActivate: [LoginActivate] },
       { path: 'edit-event/:id', component: AddEventComponent, data: { state: 'overlay' }, canActivate: [LoginActivate] },
       { path: 'edit-body/:id', component: UpdateBodyComponent, data: { state: 'overlay' }, canActivate: [LoginActivate] },

src/app/data.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable ,  Subject, noop } from 'rxjs';
 import { HttpClient, HttpHeaders, HttpRequest, HttpEventType } from '@angular/common/http';
-import { IEnumContainer, IUserProfile, ILocation, IEvent, IBody, INewsEntry, INotification } from './interfaces';
+import { IEnumContainer, IUserProfile, ILocation, IEvent, IBody, INewsEntry, INotification, IComplaint } from './interfaces';
 import { Router } from '@angular/router';
 import { environment } from '../environments/environment';
 import * as uriTemplates from 'uri-templates';
@@ -437,4 +437,8 @@ export class DataService {
   getBodyUrl(body: IBody): string {
     return window.location.origin + '/org/' + body.str_id;
   }
+
+  GetComplaint(uuid: string): Observable<IComplaint> {
+    return this.FireGET<IComplaint>(API.Complaint, {uuid: uuid});
+  }
 }

src/app/interfaces.ts

@@ -160,3 +160,50 @@ export interface IUserTagCategory {
     name: string;
     tags: IUserTag[];
 }
+
+export interface IComplaintTagUri {
+    id: string;
+    tag_uri: string;
+}
+
+export interface IComplaintComment {
+    id: string;
+    time: string;
+    comment: string;
+    commented_by: IUserProfile;
+}
+
+export interface IComplaint {
+    id: string;
+    created_by: IUserProfile;
+    description: string;
+    suggestions: string;
+    location_details: string;
+    report_date: string;
+    status: string;
+    latitude: number;
+    longitude: number;
+    location_description: string;
+    tags: IComplaintTagUri;
+    users_up_voted: IUserProfile;
+    images: string[];
+    comments: IComplaintComment;
+    vote_count: number;
+    is_subscribed: number;
+    upvoted: boolean;
+}
+
+export interface IComplaintPost {
+    description: string;
+    suggestions: string;
+    location_details: string;
+    latitude: number;
+    longitude: number;
+    location_description: string;
+    tags: string[];
+    images: string[];
+}
+
+export interface IPostComment {
+    text: string;
+}

src/app/navmenu/navmenu.component.html

@@ -58,6 +58,12 @@
     <mat-icon>map</mat-icon> &nbsp; Map
 </a>
 
+<a [routerLink]="['/venter/complaints-home']" 
+    routerLinkActive="active-link"
+    mat-list-item>
+    <mat-icon>announcement</mat-icon> &nbsp; Complaints/ Suggestions
+</a>
+
 <a [routerLink]="['/quick-links']"
    routerLinkActive="active-link"
    mat-list-item>

src/app/venter/complaints-home/complaints-home.component.css

@@ -0,0 +1,100 @@
+.container {
+    margin-right: 18%;
+    margin-left: 18%;
+}
+
+.toolbar {
+        padding-top: 100px;
+        padding-bottom: 100px;
+        background-color: blue;
+        align-content: center;
+        text-align: center;
+}
+
+.complaint-text {
+    color: white;
+    font-weight: bolder;
+}   
+
+.complaint-button {
+    color: black;
+    background-color: yellow;
+    padding: 10px 50px;
+    align-content: center;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.complaint-tabs {   
+    font-weight: bold;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    margin: auto;
+    text-decoration: none;
+}
+
+.complaint-card {
+    padding: 2.5%;
+    text-decoration: none;
+}
+
+.complaint-divider {
+    padding: 1%;
+    color: royalblue;
+}
+
+ .complaint-card-content {
+     font-size: medium;
+     padding-top: 3%;
+ }
+
+ .complaint-description {
+    font-family: Arial, Helvetica, sans-serif;
+    white-space: pre-wrap;
+ }
+
+ .card {
+     margin: auto;
+     margin-top: 5%;
+     margin-bottom: 5%;
+     width: 80%; 
+ }
+
+ .footer{
+    position: relative;
+    border-style: solid;
+    text-align: center;
+    margin: auto;
+    border-width: medium;
+    border-color: royalblue;
+    border-bottom-left-radius: 5% 100%;
+    border-bottom-right-radius: 5% 100%;
+    border-top-left-radius: 5% 100%;
+    border-top-right-radius: 5% 100%; 
+}
+
+ .status {
+     float: right;
+     background-color: red;
+     border-width: medium;
+     color: white;
+     padding-left: 2.5%;
+     padding-right: 2.5%;
+     border-bottom-left-radius: 25% 100%;
+     border-bottom-right-radius: 25% 100%;
+     border-top-left-radius: 25% 100%;
+     border-top-right-radius: 25% 100%;
+     font-weight: bold;
+     text-transform: uppercase;
+ }
+
+ .status-color {
+    background-color: lawngreen;
+ }
+
+ @media (max-width: 970px) {
+    .container {
+        margin: 0%;
+    }
+}
+