Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

src/app/app.component.sass

@@ -29,6 +29,8 @@ $scrollbar-thumb-color-dark: #aaa
   .dark-theme
     background: $scrollbar-thumb-color-dark
 
+
+
 ::ng-deep .lb-dataContainer 
   display: none
 
@@ -39,7 +41,7 @@ $scrollbar-thumb-color-dark: #aaa
   background-color: transparent
 
 ::ng-deep .lb-outerContainer
-  height: 100vh !important
+  // height: 100vh !important
   display: flex
   justify-content: center
   align-items: center

src/app/components/feed/feed.component.html

@@ -6,12 +6,23 @@
   <div [hidden]="!loggedIn">
     <mat-card>
       <mat-card-content>
+        <div id="inputPreviewWrapper">
+          <h2 *ngIf="localFileUrl">Preview:</h2>
+          <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
+          <video *ngIf="fileType == 'video'"  [src]="localFileUrl" controls="" class="html5-video-player">
+            Your browser does not support playing HTML5 video.
+            You can <a href="https://files.catbox.moe/m6gsbb.mp4" download="">download the file</a> instead.
+          </video>
+        </div>
         <mat-form-field id="input">
           <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue"
                     mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
-          <button mat-button matSuffix mat-icon-button>
-            <mat-icon>add</mat-icon>
+          <button mat-button matSuffix mat-icon-button (click)="name.click()"
+            matTooltip="upload a picture or video (up to 10MB)"
+            matTooltipShowDelay="200">
+            <mat-icon>attach_file</mat-icon>
           </button>
+          <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
         </mat-form-field>
         <p id="check">
           <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.

src/app/components/feed/feed.component.sass

@@ -16,6 +16,7 @@
   width: 100%
   padding: 0.5em
 
+
 ::ng-deep .mat-option
   touch-action: auto !important
 
@@ -30,6 +31,26 @@
   width: 100%
   padding-left: 0.5em
   padding-right: 0.5em
+  .mat-icon
+    transform: scale(1.5)
+#inputPreview
+  max-width: 75%
+  max-height: 100%
+  width: auto
+  border-radius: 4px
+  mask-mode: luminance
+  outline: none
+  user-select: none
+::ng-deep video
+  width: 100%
+  max-height: 40vh
+  outline: none
+  user-select: none
+#inputPreviewWrapper
+  margin: auto
+  text-align: center
+  max-height: 512px
+  margin-bottom: 1em
 
 #action-chooser
   width: 100%

src/app/components/feed/feed.component.ts

@@ -6,6 +6,7 @@ import {DatasharingService} from '../../services/datasharing.service';
 import {ActivityService} from 'src/app/services/activity/activity.service';
 import {User} from 'src/app/models/user';
 import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 
 @Component({
   selector: 'home-feed',
@@ -15,6 +16,12 @@ import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
 export class FeedComponent implements OnInit {
   loadingNew = true;
   loadingMostLiked = true;
+  // file upload variables
+  public uploading = false;
+  public profilePictureUrl: BehaviorSubject<string | null>;
+  private file;
+  private fileType;
+  public localFileUrl;
 
   checked = false; // if the "I protected the environment."-box is checked
   view = 'new';
@@ -27,7 +34,7 @@ export class FeedComponent implements OnInit {
 
   loggedIn = false;
   user: User;
-  errorOccurred: boolean;
+  errorOccurred = false;
 
   private errorMessage: string;
 
@@ -89,6 +96,22 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  onFileInputChange(event) {
+    this.errorOccurred = false;
+    this.errorMessage = '';
+    this.file = event.target.files[0];
+    if (this.file.type.includes('video')) {
+      this.fileType = 'video';
+    } else if (this.file.type.includes('image')) {
+      this.fileType = 'image';
+    }
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      this.localFileUrl = e.target.result;
+    };
+    reader.readAsDataURL(this.file);
+  }
+
   /**
    * Fetches the next posts when scrolled
    */

src/app/components/group/group.component.html

@@ -7,7 +7,7 @@
           <img class="profile-picture" [src]="groupProfile.picture"/>
           <mat-icon id="icon">camera_alt</mat-icon>
         </div>
-        <div *ngIf="!isAdmin">
+        <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
           <img class="profile-picture" [src]="groupProfile.picture"/>
         </div>
 
@@ -63,7 +63,7 @@
           <img class="profile-picture" [src]="groupProfile.picture"/>
           <mat-icon id="icon">camera_alt</mat-icon>
         </div>
-        <div *ngIf="!isAdmin">
+        <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
           <img class="profile-picture" [src]="groupProfile.picture"/>
         </div>
         <span id="username">{{groupProfile.name}}</span>
@@ -108,7 +108,7 @@
       </mat-toolbar-row>
     </mat-toolbar>
     <div id="accordion">
-      <mat-accordion>
+      <mat-accordion multi="true">
         <mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
           <mat-expansion-panel-header>
             <mat-panel-title>
@@ -139,7 +139,7 @@
             </mat-card>
           </div>
         </mat-expansion-panel>
-        <mat-expansion-panel [expanded]="groupProfile.events.length < 1">
+        <mat-expansion-panel expanded>
           <mat-expansion-panel-header>
             <mat-panel-title>
               Members

src/app/components/group/group.component.sass

@@ -35,7 +35,8 @@ $mat-card-header-size: 100px !default
 
   .mat-toolbar-row
     max-height: 40px
-
+  .ng-star-inserted
+    z-index: 99
   .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
@@ -73,13 +74,14 @@ $mat-card-header-size: 100px !default
 // in IE, but we're using it as a progressive enhancement.
 
 .profile-picture
+  cursor: pointer
   height: $mat-card-header-size
   width: $mat-card-header-size
   border-radius: 50%
   flex-shrink: 0
   background-size: cover
   transition-duration: 0.5s
-  z-index: 10
+  z-index: 99
   object-fit: cover
 
 .card

src/app/components/group/group.component.ts

@@ -9,6 +9,7 @@ import {Group} from 'src/app/models/group';
 import {Event} from 'src/app/models/event';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {DialogGroupFileUploadComponent} from './fileUpload/fileUpload.component';
+import {Lightbox} from 'ngx-lightbox';
 
 // DIALOG COMPONENT to create events
 @Component({
@@ -85,6 +86,7 @@ export class GroupComponent implements OnInit {
     private requestService: RequestService,
     private data: DatasharingService,
     private groupService: GroupService,
+    private lightbox: Lightbox,
     private datasharingService: DatasharingService) {
     router.events.forEach((event) => {
       // check if url changes
@@ -196,4 +198,11 @@ export class GroupComponent implements OnInit {
     });
   }
 
+  openPfpLightbox() {
+    this.lightbox.open([{
+      src: this.groupProfile.picture,
+      thumb: this.groupProfile.picture,
+    }], 0, {disableScrolling: true});
+  }
+
 }