Feature/admin manage event

src/app/app-routing.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MainListComponent } from './components/main-list/main-list.component';
 import { AdminFormCreateEventComponent } from './components/admin-form-create-event/admin-form-create-event.component';
-import { AdminFormManageEventComponent } from './components/admin-form-manage-event/admin-form-manage-event.component';
 
 
 const routes: Routes = [
@@ -11,7 +10,7 @@ const routes: Routes = [
     path: 'event/:id/present', component: MainListComponent
   },
   { path: 'new/advertisingconfig', component: AdminFormCreateEventComponent },
-  { path: 'manage/advertisingconfig', component: AdminFormManageEventComponent}
+  // { path: 'manage/advertisingconfig', component: AdminFormManageEventComponent}
 
 
 

src/app/app.module.ts

@@ -7,15 +7,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { TranslocoRootModule } from './transloco-root.module';
 import { ReactiveFormsModule } from '@angular/forms';
-import { CurrencyPipe } from '@angular/common';
+import { CurrencyPipe,
+  CommonModule
+} from '@angular/common';
+import { AdminFormCreateEventComponent } from './components/admin-form-create-event/admin-form-create-event.component';
+import { DragDropModule } from '@angular/cdk/drag-drop'
 import { MainListComponent } from './components/main-list/main-list.component';
 import { NextUpComponent } from './components/next-up/next-up.component';
-import {
-  AdminFormCreateEventComponent
-} from './components/admin-form-create-event/admin-form-create-event.component';
-import {
-  AdminFormManageEventComponent
-} from './components/admin-form-manage-event/admin-form-manage-event.component';
 import {
   MatButtonModule,
   MatTabsModule,
@@ -26,16 +24,16 @@ import {
   MatInputModule,
   MatGridListModule,
 } from '@angular/material';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+
 
 
 @NgModule({
   declarations: [
     AppComponent,
+    AdminFormCreateEventComponent,
     MainListComponent,
     NextUpComponent,
     AdminFormCreateEventComponent,
-    AdminFormManageEventComponent,
   ],
   imports: [
     BrowserModule,
@@ -55,6 +53,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     FormsModule,
     DragDropModule,
     MatCardModule,
+    CommonModule
   ],
   providers: [CurrencyPipe],
   bootstrap: [AppComponent]

src/app/campaigns.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CampaignsService } from './campaigns.service';
+
+describe('CampaignsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: CampaignsService = TestBed.get(CampaignsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/campaigns.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CampaignsService {
+
+  constructor(private _http : HttpClient) { }
+  events: any = [];
+
+  getCampaigns(){
+    this._http.get("assets/events/fakerdata.json").subscribe(data =>{
+      console.log(data);
+      this.events = data;
+    })
+  }
+
+
+}

src/app/components/admin-form-create-event/admin-form-create-event.component.html

@@ -1,82 +1,192 @@
 
 <mat-tab-group>
-    <mat-tab label="Create Event" (click)="createEvent"> </mat-tab>
-    <mat-tab label="Manage Event" (click)="goToManage"> </mat-tab>
-  </mat-tab-group>
+    <mat-tab label="Create Campaign">
 
-  <p>Welcome, User!</p>
-
-
-  <mat-horizontal-stepper linear #stepper>
-    <mat-step>
+        <p>Welcome, User!</p> 
         <form [formGroup]="nameFormGroup">
-            <ng-template matStepLabel>Event Name</ng-template>
-            <mat-form-field>
-                    <input matInput formControlName="eventName" required placeholder="what's your event called?">
-            </mat-form-field>
-            <div>
-            <button mat-raised-button matStepperNext color="primary">+ Event</button>
-            </div>
-        </form>
-    </mat-step>
-    <mat-step>
-        <ng-template matStepLabel>Timing</ng-template>
-        <div id="displaySlider"> Display Time (in seconds): 
-            <mat-slider 
-            [(ngModel)] = "value"
-            [thumbLabel] = "thumbLabel"
-            [min] = "displayMin"
-            [max] = "displayMax"
-            >   
-            </mat-slider>
-        </div>
-        <div> Frequency (in seconds): 
-            <mat-slider 
-            [(ngModel)] = "value2"   
-            [thumbLabel] = "thumbLabel"
-            [min] = "freqMin"
-            [max] = "freqMax"
-            >
-            </mat-slider>
-        </div>
-        <div>
-            <button mat-raised-button matStepperPrevious color="primary">Back</button>
-            <button mat-raised-button matStepperNext color="primary">Next</button>
-        </div>
-    </mat-step>
-
-    <mat-step>
-        <ng-template matStepLabel>Content</ng-template>
+            <mat-horizontal-stepper linear #stepper>
+                <mat-step>
+
+                        <ng-template matStepLabel>Campaign Name</ng-template>
+                        <mat-form-field>
+                            <input matInput formControlName="campaignName" required placeholder="what's your campaign called?">
+                        </mat-form-field>
+                        <div>
+                            <button mat-raised-button matStepperNext color="primary">+ Campaign</button>
+                        </div>
+
+                </mat-step>
+                <mat-step>
+                    <ng-template matStepLabel>Timing</ng-template>
+                    <div id="displaySlider"> Display Time (in seconds): 
+                        <mat-slider
+
+                        formControlName="value" 
+                        required 
+                        [thumbLabel] = "thumbLabel"
+                        [min] = "displayMin"
+                        [max] = "displayMax"
+                        >   
+                        </mat-slider>
+                    </div>
+                    <div> Frequency (in seconds): 
+                        <mat-slider 
+
+                        formControlName="value2"  
+                        required  
+                        [thumbLabel] = "thumbLabel"
+                        [min] = "freqMin"
+                        [max] = "freqMax"
+                        >
+                        </mat-slider>
+                    </div>
+                    <div>
+                        <button mat-raised-button matStepperPrevious color="primary">Back</button>
+                        <button mat-raised-button matStepperNext color="primary">Next</button>
+                    </div>
+                </mat-step>
+
+                <mat-step>
+                    <ng-template matStepLabel>Content</ng-template>
+                    <div style="border-style:solid">
+                        Add Content
+                        <input type="file">
+                        <button mat-raised-button color="secondary">Upload</button>
+                    </div>
 
-        <div style="border-style:solid">
-            Add Content
-            <input type="file">
-            <button mat-raised-button color="secondary">Upload</button>
-        </div>
-
-        <div cdkDropList style="border-style:solid" 
-        [cdkDropListData]="images1"
-        #LineUpList="cdkDropList" 
-        [cdkDropListConnectedTo]="GalleryList"
-        (cdkDropListDropped)="drop($event)">
-            Event Line Up
-            <img *ngFor="let image of images1" src={{image.src}} style="height:100px;" cdkDrag>
-        </div>
-
-        <div cdkDropList style="border-style:solid" 
-        [cdkDropListData]="images2"
-        #GalleryList="cdkDropList"
-        [cdkDropListConnectedTo]="LineUpList"
-        (cdkDropListDropped)="drop($event)">
-            Gallery
-            <!-- get images from database, display images here.
-             -->
-            <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
-        </div>
+                    <mat-card>
+                        <h2>Campaign Line-Up</h2>
+                        <div
+                        cdkDropList
+                        style='border-style: solid; height: 200px; width: 900px; display: flex; flex-direction: row' 
+                        (cdkDropListDropped)="drop($event)"
+                        [cdkDropListData]='campaignImages'
+                        cdkDropListOrientation="horizontal">
+                            <div class = "col" cdkDrag *ngFor="let image of campaignImages" [cdkDragData]="image">
+                                <img [src]="image" height='150px' width='150px'>
+                            </div>
+                        </div>
+                    </mat-card>
+                    <mat-card class="row"> 
+                        <div style='border-style: solid; height: 200px; width: 900px'>
+                        Gallery
+                            <div *ngFor="let image of gallery" (click)="onSelect(image)" style='display: inline' >
+                                <img  [src]="image.path" 
+                                [ngClass]="{selected: selectedImages[image.id]}"
+                                height='120px' width='120px' 
+                                >
+                            </div> 
+                        </div>
+                    </mat-card>
+                    <div>
+                        <button mat-raised-button matStepperNext 
+                        color="primary" 
+                        (click)="createCampaign()" 
+                        type="submit" 
+                        [disabled]="nameFormGroup.invalid"
+                        >
+                        Create My Campaign
+                        </button>
+                    </div>
+                </mat-step>
 
-
-    </mat-step>
 
+            </mat-horizontal-stepper>
+        </form>
+    </mat-tab>
 
-  </mat-horizontal-stepper>
+<!-- //////////////MANAGE CAMPAIGN/////////////////// -->
 
+    <mat-tab label="Manage Campaign">
+        <div *ngIf="manageButton; else elseBlock">  
+            <p>Welcome, User!</p> 
+            Campaigns List:
+            <div *ngFor="let event of _campaigns.events">            
+            {{event.name}}
+                <button mat-raised-button color="primary" (click)="displayOptions(this.event)" *ngIf="manageButton">Manage</button>
+                <button mat-raised-button color="primary" (click)="displayOptions()" *ngIf="editingButton" disabled="true">You are editing!</button>
+                <button mat-raised-button color="secondary">Archive</button>
+            </div> 
+        </div>
+        <ng-template #elseBlock>
+            <p>You are editing!</p> 
+        </ng-template>
+
+        <mat-horizontal-stepper linear #stepper *ngIf="showEventDetails">
+            <mat-step>
+                <form [formGroup]="nameFormGroup">
+                    <ng-template matStepLabel>Campaign: {{event.name}}</ng-template>
+                    <mat-form-field>
+                            <input matInput formControlName="campaignName" required placeholder="what's your campaign called?">
+                    </mat-form-field>
+                    <div>
+                        <button mat-raised-button matStepperNext color="primary" (click)="renameCampaign()">Rename Campaign</button>
+                        <button mat-raised-button matStepperNext color="secondary">Skip</button>
+                    </div>                    
+                </form>
+            </mat-step>
+            <mat-step>
+                <ng-template matStepLabel>Timing</ng-template>
+                <div id="displaySlider"> Display Time (in seconds): 
+                    <mat-slider 
+                    [(ngModel)] = "event.displayTime"
+                    [thumbLabel] = "thumbLabel"
+                    [min] = "displayMin"
+                    [max] = "displayMax"
+                    >   
+                    </mat-slider>
+                </div>
+                <div> Frequency (in seconds): 
+                    <mat-slider 
+                    [(ngModel)] = "event.freqTime"   
+                    [thumbLabel] = "thumbLabel"
+                    [min] = "freqMin"
+                    [max] = "freqMax"
+                    >
+                    </mat-slider>
+                </div>
+                <div>
+                    <button mat-raised-button matStepperPrevious color="primary">Back</button>
+                    <button mat-raised-button matStepperNext color="primary">Next</button>
+                </div>
+            </mat-step>
+
+            <mat-step>
+                <ng-template matStepLabel>Content</ng-template>
+
+                <div style="border-style:solid">
+                    Add Content
+                    <input type="file">
+                    <button mat-raised-button color="secondary">Upload</button>
+                </div>
+                <mat-card>
+                    <h2>Campaign Line-Up</h2>
+                    <div
+                    cdkDropList
+                    style='border-style: solid; height: 200px; width: 900px; display: flex; flex-direction: row' 
+                    (cdkDropListDropped)="drop($event)"
+                    [cdkDropListData]='campaignImages'
+                    cdkDropListOrientation="horizontal">
+                        <div class = "col" cdkDrag *ngFor="let image of campaignImages" [cdkDragData]="image">
+                            <img [src]="image" height='150px' width='150px'>
+                        </div>
+                    </div>        
+                </mat-card>
+                <mat-card class="row"> 
+                    <div style='border-style: solid; height: 200px; width: 900px'>
+                        Gallery
+                        <div *ngFor="let image of gallery" (click)="onSelect(image)" style='display: inline' >
+                            <img  [src]="image.path" 
+                            [ngClass]="{selected: selectedImages[image.id]}"
+                            height='120px' width='120px' 
+                            >
+                        </div> 
+                    </div>
+                </mat-card>
+                <div>
+                    <button mat-raised-button matStepperNext color="primary" (click)="updateCampaign()">Update Campaign</button>
+                </div>
+            </mat-step>        
+        </mat-horizontal-stepper>    
+    </mat-tab>
+</mat-tab-group>

src/app/components/admin-form-create-event/admin-form-create-event.component.scss

@@ -7,3 +7,30 @@ p {
     padding-top: 1.5em;
 }
 
+.images-layout {
+    height: 100px;
+    width: 100px;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .col {
+    margin: 5px;
+    height: 150px;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    cursor: move;
+  }
+
+  .selected {
+    border-style: solid;
+    border-width: 10px;
+    border-color: blue;
+  }
+