From 8a01f81958dea25e6d4878a322fe648c51357776 Mon Sep 17 00:00:00 2001
From: Max <s_ehrlicherschmid18@stud.hwr-berlin.de>
Date: Sat, 11 Jan 2020 12:41:16 +0100
Subject: [PATCH 1/3] fixed profile page width fixed #126 #129

---
 .../feed/postlist/postlist.component.ts       |  8 +++-
 src/app/components/group/group.component.html | 28 ++++++++++++-
 src/app/components/group/group.component.sass |  3 +-
 .../components/profile/profile.component.html | 39 ++++++++++++++++++-
 .../components/profile/profile.component.sass |  8 ++--
 5 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/src/app/components/feed/postlist/postlist.component.ts b/src/app/components/feed/postlist/postlist.component.ts
index c5e4f52..bcb3afe 100644
--- a/src/app/components/feed/postlist/postlist.component.ts
+++ b/src/app/components/feed/postlist/postlist.component.ts
@@ -21,12 +21,16 @@ export class PostlistComponent implements OnInit {
 
   voteUp(pPost: Post) {
     this.feedService.upvote(pPost.id).subscribe(response => {
-        this.voteEvent.emit(true); });
+      // this.voteEvent.emit(true);
+      pPost.userVote = response.json().data.vote;
+    });
   }
 
   voteDown(pPost: Post) {
     this.feedService.downvote(pPost.id).subscribe(response => {
-        this.voteEvent.emit(true); });
+      // this.voteEvent.emit(true);
+      pPost.userVote = response.json().data.vote;
+    });
   }
 
   deletePost(pPost: Post) {
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
index 55dfe65..d46c241 100644
--- a/src/app/components/group/group.component.html
+++ b/src/app/components/group/group.component.html
@@ -1,6 +1,30 @@
 <div id="profile-page">
     <div id="profilecontainer" *ngIf="!groupNotFound && !loading">
-        <mat-toolbar color="primary" id="toolbar">
+        <!--on small screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
+            <mat-toolbar-row>
+                <div class="profile-picture"></div>
+                <span id="username">{{groupProfile.name}}</span>
+                <button mat-icon-button 
+                    class="request-button" 
+                    (click)="joinGroup(groupProfile)" 
+                    [disabled]="!groupProfile.allowedToJoinGroup">
+                    <mat-icon>group_add</mat-icon>
+                </button>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div class="info-box">
+                    <span id="handle">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
+                </div>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div class="info-box">
+                    <span class="info">{{groupProfile.members.length}} member(s)</span>
+                </div>
+            </mat-toolbar-row>
+        </mat-toolbar>
+        <!--on big screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{groupProfile.name}}</span>
@@ -13,7 +37,7 @@
                 </button>
             </mat-toolbar-row>
             <mat-toolbar-row>
-                <div id="info-box">
+                <div class="info-box">
                     <span class="info">{{groupProfile.members.length}} member(s)</span>
                 </div>
             </mat-toolbar-row>
diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass
index 335d7d1..66f78e9 100644
--- a/src/app/components/group/group.component.sass
+++ b/src/app/components/group/group.component.sass
@@ -6,6 +6,7 @@
   width: 100%
   height: calc(100% - 56px)
   overflow: scroll
+  overflow-x: hidden
 
 #profile 
   padding: 2em
@@ -27,7 +28,7 @@
   margin-top: 32px
   .mat-toolbar-row
     max-height: 40px
-  #info-box
+  .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
     .info
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index b791d85..12bad54 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,6 +1,41 @@
 <div id="profile-page">
     <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
-        <mat-toolbar color="primary" id="toolbar">
+        <!--on small screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
+            <mat-toolbar-row>
+                <div class="profile-picture"></div>
+                <span id="username">{{userProfile.username}}</span>
+                <button mat-icon-button 
+                class="request-button" 
+                (click)="sendFriendRequest(userProfile)" 
+                [disabled]="!userProfile.allowedToSendRequest">
+                    <mat-icon>person_add</mat-icon>
+                </button>
+            </mat-toolbar-row>
+            <mat-toolbar-row> 
+                <div class="info-box"> 
+                    <span id="handle">@{{userProfile.handle}}</span>
+                </div>  
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div>
+                    <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
+                </div>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div>
+                    <span class="info">{{userProfile.friendCount}} friends</span>
+                    <span class="info">{{userProfile.groupCount}} groups</span>
+                </div>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div>
+                    <span class="info">joined on {{userProfile.joinedAt}}</span>
+                </div>
+            </mat-toolbar-row>
+        </mat-toolbar>
+        <!--on big screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{userProfile.username}}</span>
@@ -13,7 +48,7 @@
                 </button>
             </mat-toolbar-row>
             <mat-toolbar-row>
-                <div id="info-box">
+                <div class="info-box">
                     <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
                     <span class="info">{{userProfile.friendCount}} friends</span>
                     <span class="info">{{userProfile.groupCount}} groups</span>
diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass
index 335d7d1..9acedb2 100644
--- a/src/app/components/profile/profile.component.sass
+++ b/src/app/components/profile/profile.component.sass
@@ -6,6 +6,7 @@
   width: 100%
   height: calc(100% - 56px)
   overflow: scroll
+  overflow-x: hidden
 
 #profile 
   padding: 2em
@@ -27,11 +28,12 @@
   margin-top: 32px
   .mat-toolbar-row
     max-height: 40px
-  #info-box
+  .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
-    .info
-      margin-right: 3em 
+  .info
+    margin-right: 1em 
+    font-size: 14px
   #username
     margin: 0 0.5em
   #handle

From c9c6a9b8360a809837d6e5951d5fcc9ed4f3d92b Mon Sep 17 00:00:00 2001
From: Max <s_ehrlicherschmid18@stud.hwr-berlin.de>
Date: Sat, 11 Jan 2020 14:09:13 +0100
Subject: [PATCH 2/3] added create event function

---
 src/app/app.module.ts                         | 13 +++-
 src/app/components/group/dialog.html          | 15 +++++
 src/app/components/group/group.component.html | 22 +++++--
 src/app/components/group/group.component.sass |  7 ++-
 src/app/components/group/group.component.ts   | 61 ++++++++++++++++---
 src/app/services/group/group.service.ts       | 18 ++++++
 6 files changed, 117 insertions(+), 19 deletions(-)
 create mode 100644 src/app/components/group/dialog.html

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 10631d8..595c8f7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { HomeComponent } from './components/home/home.component';
 import { SocialComponent } from './components/social/social.component';
 import { GroupsComponent } from './components/social/groups/groups.component';
 import { DialogCreateGroupComponent } from './components/social/groups/groups.component';
+import { DialogCreateEventComponent } from './components/group/group.component';
 import { ChatmanagerComponent } from './components/chatmanager/chatmanager.component';
 import { ChatlistComponent } from './components/chatlist/chatlist.component';
 import { PostlistComponent } from './components/feed/postlist/postlist.component';
@@ -61,6 +62,8 @@ import {MatIconRegistry} from '@angular/material/icon';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatNativeDateModule} from '@angular/material/';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
@@ -101,7 +104,8 @@ const appRoutes: Routes = [
     MainNavigationComponent,
     SearchComponent,
     DialogCreateGroupComponent,
-    GroupComponent
+    GroupComponent,
+    DialogCreateEventComponent
   ],
   imports: [
     BrowserModule,
@@ -110,6 +114,8 @@ const appRoutes: Routes = [
     SocketIoModule.forRoot(config),
     GraphQLModule,
     HttpClientModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
     RouterModule.forRoot(
       appRoutes
     ),
@@ -140,9 +146,10 @@ const appRoutes: Routes = [
     MatProgressSpinnerModule,
     MatDialogModule,
     MatTooltipModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatDatepickerModule
   ],
-  entryComponents: [ DialogCreateGroupComponent ],
+  entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ],
   providers: [],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/components/group/dialog.html b/src/app/components/group/dialog.html
new file mode 100644
index 0000000..4dab61d
--- /dev/null
+++ b/src/app/components/group/dialog.html
@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Create a new event!</h1>
+<div mat-dialog-content>
+  <mat-form-field style="display:contents;">
+    <input matInput placeholder="Enter groupname" #name>
+  </mat-form-field>
+  <mat-form-field style="display:contents;">
+    <input matInput [matDatepicker]="picker" placeholder="Choose a date" #date disabled>
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker disabled="false"></mat-datepicker>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button cdkFocusInitial (click)="createEvent(name.value, date.value)">Create Group</button>
+</div>
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
index d46c241..f205a55 100644
--- a/src/app/components/group/group.component.html
+++ b/src/app/components/group/group.component.html
@@ -5,12 +5,22 @@
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{groupProfile.name}}</span>
-                <button mat-icon-button 
-                    class="request-button" 
-                    (click)="joinGroup(groupProfile)" 
-                    [disabled]="!groupProfile.allowedToJoinGroup">
-                    <mat-icon>group_add</mat-icon>
-                </button>
+                <div class="button-box">
+                    <button mat-icon-button 
+                        class="request-button" 
+                        matTooltip="join group" matTooltipShowDelay="500"
+                        (click)="joinGroup(groupProfile)" 
+                        [disabled]="!groupProfile.allowedToJoinGroup">
+                        <mat-icon>group_add</mat-icon>
+                    </button>
+                    <button mat-icon-button 
+                        class="request-button" 
+                        matTooltip="create event" matTooltipShowDelay="500"
+                        (click)="openDialog()" 
+                        [disabled]="!isAdmin">
+                        <mat-icon>event</mat-icon>
+                    </button>
+                </div>
             </mat-toolbar-row>
             <mat-toolbar-row>
                 <div class="info-box">
diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass
index 66f78e9..921c2fd 100644
--- a/src/app/components/group/group.component.sass
+++ b/src/app/components/group/group.component.sass
@@ -20,10 +20,11 @@
   .icon-box
     text-align: right
     width: 100%
+.button-box
+  width: 100%
+  text-align: right
 .request-button
-  margin-top: 0.5em
-  margin-bottom: 0.5em
-  margin-left: auto
+  margin: auto 0
 #toolbar
   margin-top: 32px
   .mat-toolbar-row
diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts
index 3fe5209..a109a90 100644
--- a/src/app/components/group/group.component.ts
+++ b/src/app/components/group/group.component.ts
@@ -6,7 +6,40 @@ import { RequestService } from 'src/app/services/request/request.service';
 import { DatasharingService } from '../../services/datasharing.service';
 import { GroupService } from 'src/app/services/group/group.service';
 import { Group } from 'src/app/models/group';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 
+// DIALOG COMPONENT to create events
+@Component({
+  selector: 'dialog-overview-example-dialog',
+  templateUrl: 'dialog.html',
+})
+export class DialogCreateEventComponent {
+  groupId: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogCreateEventComponent>,
+    private group: GroupService,
+    private router: Router) {
+      this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
+    }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  createEvent(name: string, date: string) {
+    name = name.trim();
+    if (name && date) {
+    this.group.createEvent(name, (new Date(date)).getTime().toString(), this.groupId).subscribe(response => {
+      console.log(response);
+    });
+    this.dialogRef.close();
+    }
+  }
+
+}
+
+// GROUP COMPONENT
 @Component({
   selector: 'app-profile',
   templateUrl: './group.component.html',
@@ -17,12 +50,14 @@ export class GroupComponent implements OnInit {
   groupProfile: Group = new Group();
   self: User;
   id: string;
+  isAdmin = false;
   groupNotFound = false;
 
   loading = false;
 
   constructor(
     private router: Router,
+    public dialog: MatDialog,
     private requestService: RequestService,
     private data: DatasharingService,
     private groupService: GroupService) {
@@ -48,13 +83,25 @@ export class GroupComponent implements OnInit {
     });
     this.groupService.getGroupData(this.id);
     this.groupService.group.subscribe(response => {
-        if (response) {
-          this.groupProfile = response;
-          // tslint:disable-next-line:max-line-length
-          this.groupProfile.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(this.groupProfile.id, this.self);
-        } else { this.groupNotFound = true; }
-        this.loading = false;
-      });
+      this.isAdmin = false;
+      if (response) {
+        this.groupProfile = response;
+        // tslint:disable-next-line:max-line-length
+        this.groupProfile.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(this.groupProfile.id, this.self);
+        for (const admin of this.groupProfile.admins) {
+          if (admin.userID === this.self.userID) {
+            this.isAdmin = true;
+          }
+        }
+      } else { this.groupNotFound = true; }
+      this.loading = false;
+    });
+  }
+
+  openDialog(): void {
+    const dialogRef = this.dialog.open(DialogCreateEventComponent, {
+      width: '250px'
+    });
   }
 
   public joinGroup(group: Group) {
diff --git a/src/app/services/group/group.service.ts b/src/app/services/group/group.service.ts
index 6a0adea..c1552d0 100644
--- a/src/app/services/group/group.service.ts
+++ b/src/app/services/group/group.service.ts
@@ -72,4 +72,22 @@ export class GroupService {
     }
     return null;
   }
+
+  public createEvent(name: string, date: string, groupId: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    const body = {query: `mutation($groupId: ID!, $name: String, $date: String) {
+        createEvent(name: $name, dueDate: $date, groupId: $groupId) {
+          id
+          name
+          dueDate
+        }
+      }`, variables: {
+          name: name,
+          date: date,
+          groupId: groupId
+      }};
+
+    return this.http.post(environment.graphQLUrl, body);
+  }
 }

From 284f8995e013aafecc2fc644db4f4b1de823aef0 Mon Sep 17 00:00:00 2001
From: Max <s_ehrlicherschmid18@stud.hwr-berlin.de>
Date: Sat, 11 Jan 2020 23:23:36 +0100
Subject: [PATCH 3/3] events and members are displayed on group page now

---
 src/app/components/group/dialog.html          |  4 +-
 src/app/components/group/group.component.html | 67 +++++++++++++++++--
 src/app/components/group/group.component.sass | 66 +++++++++++-------
 src/app/components/group/group.component.ts   | 16 ++++-
 src/app/models/event.ts                       | 11 +++
 src/app/models/group.ts                       |  2 +
 src/app/services/group/group.service.ts       | 26 ++++---
 7 files changed, 146 insertions(+), 46 deletions(-)
 create mode 100644 src/app/models/event.ts

diff --git a/src/app/components/group/dialog.html b/src/app/components/group/dialog.html
index 4dab61d..80b4cff 100644
--- a/src/app/components/group/dialog.html
+++ b/src/app/components/group/dialog.html
@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>Create a new event!</h1>
 <div mat-dialog-content>
   <mat-form-field style="display:contents;">
-    <input matInput placeholder="Enter groupname" #name>
+    <input matInput placeholder="Enter eventname" #name>
   </mat-form-field>
   <mat-form-field style="display:contents;">
     <input matInput [matDatepicker]="picker" placeholder="Choose a date" #date disabled>
@@ -11,5 +11,5 @@
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancel</button>
-  <button mat-button cdkFocusInitial (click)="createEvent(name.value, date.value)">Create Group</button>
+  <button mat-button cdkFocusInitial (click)="createEvent(name.value, date.value)">Create Event</button>
 </div>
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
index f205a55..764d2a4 100644
--- a/src/app/components/group/group.component.html
+++ b/src/app/components/group/group.component.html
@@ -38,13 +38,23 @@
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{groupProfile.name}}</span>
-                <span id="handle">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
-                <button mat-icon-button 
-                    class="request-button" 
-                    (click)="joinGroup(groupProfile)" 
-                    [disabled]="!groupProfile.allowedToJoinGroup">
-                    <mat-icon>group_add</mat-icon>
-                </button>
+                <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
+                <div class="button-box">
+                    <button mat-icon-button 
+                        class="request-button" 
+                        matTooltip="join group" matTooltipShowDelay="500"
+                        (click)="joinGroup(groupProfile)" 
+                        [disabled]="!groupProfile.allowedToJoinGroup">
+                        <mat-icon>group_add</mat-icon>
+                    </button>
+                    <button mat-icon-button 
+                        class="request-button" 
+                        matTooltip="create event" matTooltipShowDelay="500"
+                        (click)="openDialog()" 
+                        [disabled]="!isAdmin">
+                        <mat-icon>event</mat-icon>
+                    </button>
+                </div>
             </mat-toolbar-row>
             <mat-toolbar-row>
                 <div class="info-box">
@@ -52,6 +62,49 @@
                 </div>
             </mat-toolbar-row>
         </mat-toolbar>
+        <mat-accordion>
+            <mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  Events
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="list">
+                <mat-card class="card" *ngFor="let event of groupProfile.events" 
+                [class.selected]="event === selectedEvent"
+                tabindex="0">
+                  <mat-card-header>
+                    <mat-card-title>{{event.name}}</mat-card-title>
+                    <mat-card-subtitle >{{event.date}}</mat-card-subtitle>
+                    <!--<div class="icon-box">
+                      <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
+                    </div>-->
+                  </mat-card-header>
+                </mat-card>
+              </div>
+            </mat-expansion-panel>
+            <mat-expansion-panel [expanded]="groupProfile.events.length < 1">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  Members  
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div class="list">
+                <mat-card class="card" *ngFor="let user of groupProfile.members" 
+                [class.selected]="user === selectedUser"
+                tabindex="0">
+                  <mat-card-header>
+                    <div mat-card-avatar class="profile-picture" (click)="showUserProfile(user)"></div>
+                    <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
+                    <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
+                    <div class="icon-box">
+                      <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
+                    </div>
+                  </mat-card-header>
+                </mat-card>
+              </div>
+            </mat-expansion-panel>
+          </mat-accordion> 
     </div>
     <div id="profilecontainer" *ngIf="groupNotFound">
         <h1>Group not found :(</h1>
diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass
index 921c2fd..649f40c 100644
--- a/src/app/components/group/group.component.sass
+++ b/src/app/components/group/group.component.sass
@@ -13,6 +13,7 @@
   max-width: 1200px
   margin: 0 auto
 
+$mat-card-header-size: 100px !default
 #profile-card-container
   margin: 0 auto
   width: 100%
@@ -38,30 +39,45 @@
     margin: 0 0.5em
   #handle
     font-size: 14px
+  .profile-picture
+    background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+    height: $mat-card-header-size
+    width: $mat-card-header-size
+    border-radius: 50%
+    flex-shrink: 0
+    background-size: cover
+    // Makes `<img>` tags behave like `background-size: cover`. Not supported
+    // in IE, but we're using it as a progressive enhancement.
+    object-fit: cover
 
-
-.mat-table
+.card
+  box-sizing: border-box
   width: 100%
-  max-width: 690px
-  margin: 0 auto
-.mat-header-cell
-  padding-right: 0.5em
-
-$mat-card-header-size: 100px !default
-.profile-picture
-  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
-  height: $mat-card-header-size
-  width: $mat-card-header-size
-  border-radius: 50%
-  flex-shrink: 0
-  background-size: cover
-  // Makes `<img>` tags behave like `background-size: cover`. Not supported
-  // in IE, but we're using it as a progressive enhancement.
-  object-fit: cover
-
-
-
-#postlist
-  margin: 0.5em auto
-  padding: 0
-  max-width: 690px
\ No newline at end of file
+  margin-top: 0.5em
+  outline: none
+  user-select: none
+  /deep/ .mat-card-header-text
+    width: 1000%
+    margin: 0
+    margin-left: 16px
+  .mat-card-subtitle
+    margin: 0
+    word-break: break-all
+  .mat-card-title
+    margin: 0
+    word-break: break-all
+  .request-button
+    margin-top: 0.5em
+    margin-bottom: 0.5em
+  .profile-picture
+    background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+    background-size: cover
+  .profile-picture:hover
+    cursor: pointer
+.pointer
+  cursor: pointer
+  
+/deep/ .mat-expansion-panel
+  background: #e6e6e6
+/deep/.dark-theme .mat-expansion-panel
+  background: #121212
\ No newline at end of file
diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts
index a109a90..6d42205 100644
--- a/src/app/components/group/group.component.ts
+++ b/src/app/components/group/group.component.ts
@@ -30,9 +30,7 @@ export class DialogCreateEventComponent {
   createEvent(name: string, date: string) {
     name = name.trim();
     if (name && date) {
-    this.group.createEvent(name, (new Date(date)).getTime().toString(), this.groupId).subscribe(response => {
-      console.log(response);
-    });
+    this.group.createEvent(name, (new Date(date)).getTime().toString(), this.groupId);
     this.dialogRef.close();
     }
   }
@@ -93,6 +91,9 @@ export class GroupComponent implements OnInit {
             this.isAdmin = true;
           }
         }
+        for (const member of this.groupProfile.members) {
+          member.allowedToSendRequest = this.requestService.isAllowedToSendRequest(member.userID, this.self);
+        }
       } else { this.groupNotFound = true; }
       this.loading = false;
     });
@@ -108,4 +109,13 @@ export class GroupComponent implements OnInit {
     group.allowedToJoinGroup = false;
     this.requestService.joinGroup(group);
   }
+
+  public showUserProfile(user: User) {
+    this.router.navigate(['profile/' + user.userID]);
+  }
+
+  public sendFriendRequest(user: User) {
+    user.allowedToSendRequest = false;
+    this.requestService.sendFriendRequest(user);
+  }
 }
diff --git a/src/app/models/event.ts b/src/app/models/event.ts
new file mode 100644
index 0000000..95d9151
--- /dev/null
+++ b/src/app/models/event.ts
@@ -0,0 +1,11 @@
+export class Event {
+    id: number;
+    name: string;
+    date: string;
+
+    constructor(pId: number, pName: string, pdate: string) {
+        this.id = pId;
+        this.name = pName;
+        this.date = pdate;
+    }
+}
diff --git a/src/app/models/group.ts b/src/app/models/group.ts
index 27b5b75..0395207 100644
--- a/src/app/models/group.ts
+++ b/src/app/models/group.ts
@@ -1,4 +1,5 @@
 import { User } from 'src/app/models/user';
+import { Event } from 'src/app/models/event';
 
 export class Group {
   id: number;
@@ -7,5 +8,6 @@ export class Group {
   creator: User = new User();
   members: User[] = new Array();
   admins: User[] = new Array();
+  events: Event[] = new Array();
   allowedToJoinGroup = false;
 }
diff --git a/src/app/services/group/group.service.ts b/src/app/services/group/group.service.ts
index c1552d0..0f064ba 100644
--- a/src/app/services/group/group.service.ts
+++ b/src/app/services/group/group.service.ts
@@ -3,7 +3,8 @@ import { Http } from '@angular/http';
 import { Author } from 'src/app/models/author';
 import { environment } from 'src/environments/environment';
 import { User } from 'src/app/models/user';
-import { Observable, Subject } from 'rxjs';
+import { Event } from 'src/app/models/event';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { Group } from 'src/app/models/group';
 
 @Injectable({
@@ -11,7 +12,7 @@ import { Group } from 'src/app/models/group';
 })
 export class GroupService {
 
-  public group: Subject<any> = new Subject();
+  public group: BehaviorSubject<Group> = new BehaviorSubject(new Group());
 
   constructor(private http: Http) { }
 
@@ -34,6 +35,7 @@ export class GroupService {
           creator{id name handle}
           admins{id name handle}
           members{id name handle}
+          events{id name dueDate}
       }
     }`, variables: {
       groupId: id
@@ -44,8 +46,6 @@ export class GroupService {
 
   public renderGroup(response: any): Group {
     const group = new Group();
-    const members: User[] = new Array();
-    const admins: User[] = new Array();
     if (response.data.getGroup != null) {
       group.id = response.data.getGroup.id;
       group.name = response.data.getGroup.name;
@@ -57,17 +57,20 @@ export class GroupService {
         user.userID = member.id;
         user.username = member.name;
         user.handle = member.handle;
-        members.push(user);
+        group.members.push(user);
       }
-      group.members = members;
       for (const admin of response.data.getGroup.admins) {
         const user = new User();
         user.userID = admin.id;
         user.username = admin.name;
         user.handle = admin.handle;
-        admins.push(user);
+        group.admins.push(user);
+      }
+      for (const event of response.data.getGroup.events) {
+        const temp = new Date(Number(event.dueDate));
+        const date = temp.toLocaleString('en-GB');
+        group.events.push(new Event(event.id, event.name, date));
       }
-      group.admins = admins;
       return group;
     }
     return null;
@@ -88,6 +91,11 @@ export class GroupService {
           groupId: groupId
       }};
 
-    return this.http.post(environment.graphQLUrl, body);
+    this.http.post(environment.graphQLUrl, body).subscribe(response => {
+      const event = response.json().data.createEvent;
+      const temp = new Date(Number(event.dueDate));
+      const pdate = temp.toLocaleString('en-GB');
+      this.group.next(this.renderGroup(this.group.getValue().events.push(new Event(event.id, event.name, pdate))));
+    });
   }
 }