From 55e254119504118434c30de9c08372e95a6d4702 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Mon, 6 Apr 2020 20:00:44 -0700
Subject: [PATCH 01/17] test

---
 .../admin-form-create-event.component.html                       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 0b8baff..2cdd45f 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -79,4 +79,5 @@
 
 
   </mat-horizontal-stepper>
+  <div>test</div>
 

From a496f760952b55e117d8ba66ed3a77b9e468d28e Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Mon, 6 Apr 2020 21:15:57 -0700
Subject: [PATCH 02/17] additional tabs added and stepper added to change event
 settings

---
 .../admin-form-create-event.component.html    | 102 ++++++++++++++++--
 .../admin-form-create-event.component.ts      |   5 +-
 2 files changed, 99 insertions(+), 8 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 2cdd45f..a4deb8e 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -1,11 +1,8 @@
 
 <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 Event" (click)="createEvent">
 
-  <p>Welcome, User!</p>
- 
+  <p>Welcome, User!</p> 
 
   <mat-horizontal-stepper linear #stepper>
     <mat-step>
@@ -78,6 +75,97 @@
     </mat-step>
 
 
-  </mat-horizontal-stepper>
-  <div>test</div>
+    </mat-horizontal-stepper>
+    </mat-tab>
 
+<!-- //////////////MANAGE EVENT/////////////////// -->
+  <mat-tab label="Manage Event" (click)="goToManage">
+    <p>Welcome, User!</p> 
+    Event List:
+    <div *ngFor="let event of eventList">
+        
+        {{event.name}}
+        <button mat-raised-button color="primary">Manage</button>
+        <button mat-raised-button color="secondary">Archive</button>
+    </div>     
+  </mat-tab>
+  <mat-tab label="Change Event Settings" (click)="goToManage">
+      <!-- ADD logic to hide tab unless event is selected HERE -->
+    <p>Welcome, User!</p> 
+    
+    <mat-horizontal-stepper linear #stepper>
+        <mat-step>
+            <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">Rename 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>
+    
+            <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-step>
+    
+    
+        </mat-horizontal-stepper>
+        </mat-tab>
+  
+
+</mat-tab-group>
\ No newline at end of file
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index eefc3f6..6351e88 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -32,7 +32,10 @@ export class AdminFormCreateEventComponent implements OnInit {
       src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
     }
   ]
-
+  eventList = [
+    {name: "Event 1"},
+    {name: "Event 2"}
+  ]
 
   constructor(private _formBuilder: FormBuilder, private _router: Router ) { }
 

From 78bb40095884cb9504174f874267191d473c31ad Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Mon, 6 Apr 2020 21:37:45 -0700
Subject: [PATCH 03/17] removed third tab and added stepper to tab 2

---
 .../admin-form-create-event.component.html            | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index a4deb8e..1b32a3a 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -87,11 +87,7 @@
         {{event.name}}
         <button mat-raised-button color="primary">Manage</button>
         <button mat-raised-button color="secondary">Archive</button>
-    </div>     
-  </mat-tab>
-  <mat-tab label="Change Event Settings" (click)="goToManage">
-      <!-- ADD logic to hide tab unless event is selected HERE -->
-    <p>Welcome, User!</p> 
+    </div> 
     
     <mat-horizontal-stepper linear #stepper>
         <mat-step>
@@ -164,8 +160,9 @@
         </mat-step>
     
     
-        </mat-horizontal-stepper>
-        </mat-tab>
+        </mat-horizontal-stepper>    
+  </mat-tab>
+
   
 
 </mat-tab-group>
\ No newline at end of file

From fd26b608d87bf489c71c67d04596484dd1ee9126 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Wed, 8 Apr 2020 19:53:14 -0700
Subject: [PATCH 04/17] event edits only shown when event is selected

---
 .../admin-form-create-event.component.html        | 15 +++++++++++----
 .../admin-form-create-event.component.ts          | 11 +++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 1b32a3a..5379bca 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -70,7 +70,9 @@
              -->
             <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
         </div>
-
+        <div>
+            <button mat-raised-button matStepperNext color="primary">Create My Event</button>
+        </div>
         
     </mat-step>
 
@@ -85,11 +87,12 @@
     <div *ngFor="let event of eventList">
         
         {{event.name}}
-        <button mat-raised-button color="primary">Manage</button>
+        <button mat-raised-button color="primary" (click)="displayOptions()" *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> 
     
-    <mat-horizontal-stepper linear #stepper>
+    <mat-horizontal-stepper linear #stepper *ngIf="showEventDetails">
         <mat-step>
             <form [formGroup]="nameFormGroup">
                 <ng-template matStepLabel>Event Name</ng-template>
@@ -98,7 +101,9 @@
                 </mat-form-field>
                 <div>
                 <button mat-raised-button matStepperNext color="primary">Rename Event</button>
+                <button mat-raised-button matStepperNext color="secondary">Skip</button>
                 </div>
+                
             </form>
         </mat-step>
         <mat-step>
@@ -155,7 +160,9 @@
                  -->
                 <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
             </div>
-    
+            <div>
+               <button mat-raised-button matStepperNext color="primary">Update Event</button>
+            </div>
             
         </mat-step>
     
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 6351e88..5c2857f 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -61,6 +61,17 @@ export class AdminFormCreateEventComponent implements OnInit {
 
   }
 
+  showEventDetails : boolean = false;
+  manageButton : boolean = true;
+  editingButton : boolean = false;
+  disabled: boolean;
+
+  displayOptions(){
+    this.showEventDetails = !this.showEventDetails;
+    this.manageButton =!this.manageButton;
+    this.editingButton =!this.editingButton;
+  }
+  
   goToManage(){
     this._router.navigate(['/admin-manage'])
   }

From 74aa00143adf509a7ff21fd3393ddb801761c00b Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Wed, 8 Apr 2020 19:58:35 -0700
Subject: [PATCH 05/17] removed manage event component

---
 src/app/app-routing.module.ts                 |  4 +--
 src/app/app.module.ts                         |  4 +--
 .../admin-form-manage-event.component.html    |  1 -
 .../admin-form-manage-event.component.scss    |  0
 .../admin-form-manage-event.component.spec.ts | 25 -------------------
 .../admin-form-manage-event.component.ts      | 15 -----------
 6 files changed, 2 insertions(+), 47 deletions(-)
 delete mode 100644 src/app/components/admin-form-manage-event/admin-form-manage-event.component.html
 delete mode 100644 src/app/components/admin-form-manage-event/admin-form-manage-event.component.scss
 delete mode 100644 src/app/components/admin-form-manage-event/admin-form-manage-event.component.spec.ts
 delete mode 100644 src/app/components/admin-form-manage-event/admin-form-manage-event.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 31b4c2a..5593323 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 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 = [
-  { path: 'new/advertisingconfig', component: AdminFormCreateEventComponent },
-  { path: 'manage/advertisingconfig', component: AdminFormManageEventComponent}
+  { path: 'new/advertising-config', component: AdminFormCreateEventComponent },
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3be5f04..cfee877 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,14 +10,12 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { CurrencyPipe } from '@angular/common';
 import { AdminFormCreateEventComponent } from './components/admin-form-create-event/admin-form-create-event.component';
 import { MatButtonModule, MatTabsModule, MatStepperModule, MatFormFieldModule, MatInputModule, MatSliderModule } from '@angular/material';
-import { AdminFormManageEventComponent } from './components/admin-form-manage-event/admin-form-manage-event.component';
 import { DragDropModule } from '@angular/cdk/drag-drop'
 
 @NgModule({
   declarations: [ 
     AppComponent,
-    AdminFormCreateEventComponent,
-    AdminFormManageEventComponent
+    AdminFormCreateEventComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.html b/src/app/components/admin-form-manage-event/admin-form-manage-event.component.html
deleted file mode 100644
index 9706601..0000000
--- a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>admin-form-manage-event works!</p>
diff --git a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.scss b/src/app/components/admin-form-manage-event/admin-form-manage-event.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.spec.ts b/src/app/components/admin-form-manage-event/admin-form-manage-event.component.spec.ts
deleted file mode 100644
index 06147a3..0000000
--- a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AdminFormManageEventComponent } from './admin-form-manage-event.component';
-
-describe('AdminFormManageEventComponent', () => {
-  let component: AdminFormManageEventComponent;
-  let fixture: ComponentFixture<AdminFormManageEventComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AdminFormManageEventComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AdminFormManageEventComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.ts b/src/app/components/admin-form-manage-event/admin-form-manage-event.component.ts
deleted file mode 100644
index d4dc870..0000000
--- a/src/app/components/admin-form-manage-event/admin-form-manage-event.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-admin-form-manage-event',
-  templateUrl: './admin-form-manage-event.component.html',
-  styleUrls: ['./admin-form-manage-event.component.scss']
-})
-export class AdminFormManageEventComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

From e26ce0da53f24ab436b58bc0e1457800323799c9 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Wed, 8 Apr 2020 20:57:12 -0700
Subject: [PATCH 06/17] renamed to Campaign

---
 .../admin-form-create-event.component.html    | 26 +++++++++----------
 .../admin-form-create-event.component.ts      |  4 +--
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 5379bca..bf129aa 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -1,18 +1,18 @@
 
 <mat-tab-group>
-    <mat-tab label="Create Event" (click)="createEvent">
+    <mat-tab label="Create Campaign" (click)="createEvent">
 
   <p>Welcome, User!</p> 
 
   <mat-horizontal-stepper linear #stepper>
     <mat-step>
         <form [formGroup]="nameFormGroup">
-            <ng-template matStepLabel>Event Name</ng-template>
+            <ng-template matStepLabel>Campaign Name</ng-template>
             <mat-form-field>
-                    <input matInput formControlName="eventName" required placeholder="what's your event called?">
+                    <input matInput formControlName="eventName" required placeholder="what's your campaign called?">
             </mat-form-field>
             <div>
-            <button mat-raised-button matStepperNext color="primary">+ Event</button>
+            <button mat-raised-button matStepperNext color="primary">+ Campaign</button>
             </div>
         </form>
     </mat-step>
@@ -56,7 +56,7 @@
         #LineUpList="cdkDropList" 
         [cdkDropListConnectedTo]="GalleryList"
         (cdkDropListDropped)="drop($event)">
-            Event Line Up
+        Campaign Line Up
             <img *ngFor="let image of images1" src={{image.src}} style="height:100px;" cdkDrag>
         </div>
         
@@ -71,7 +71,7 @@
             <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
         </div>
         <div>
-            <button mat-raised-button matStepperNext color="primary">Create My Event</button>
+            <button mat-raised-button matStepperNext color="primary">Create My Campaign</button>
         </div>
         
     </mat-step>
@@ -81,9 +81,9 @@
     </mat-tab>
 
 <!-- //////////////MANAGE EVENT/////////////////// -->
-  <mat-tab label="Manage Event" (click)="goToManage">
+  <mat-tab label="Manage Campaign" (click)="goToManage">
     <p>Welcome, User!</p> 
-    Event List:
+    Campaigns List:
     <div *ngFor="let event of eventList">
         
         {{event.name}}
@@ -95,12 +95,12 @@
     <mat-horizontal-stepper linear #stepper *ngIf="showEventDetails">
         <mat-step>
             <form [formGroup]="nameFormGroup">
-                <ng-template matStepLabel>Event Name</ng-template>
+                <ng-template matStepLabel>Campaign Name</ng-template>
                 <mat-form-field>
-                        <input matInput formControlName="eventName" required placeholder="what's your event called?">
+                        <input matInput formControlName="eventName" required placeholder="what's your campaign called?">
                 </mat-form-field>
                 <div>
-                <button mat-raised-button matStepperNext color="primary">Rename Event</button>
+                <button mat-raised-button matStepperNext color="primary">Rename Campaign</button>
                 <button mat-raised-button matStepperNext color="secondary">Skip</button>
                 </div>
                 
@@ -146,7 +146,7 @@
             #LineUpList="cdkDropList" 
             [cdkDropListConnectedTo]="GalleryList"
             (cdkDropListDropped)="drop($event)">
-                Event Line Up
+            Campaign Line Up
                 <img *ngFor="let image of images1" src={{image.src}} style="height:100px;" cdkDrag>
             </div>
             
@@ -161,7 +161,7 @@
                 <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
             </div>
             <div>
-               <button mat-raised-button matStepperNext color="primary">Update Event</button>
+               <button mat-raised-button matStepperNext color="primary">Update Campaign</button>
             </div>
             
         </mat-step>
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 5c2857f..27f7400 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -33,8 +33,8 @@ export class AdminFormCreateEventComponent implements OnInit {
     }
   ]
   eventList = [
-    {name: "Event 1"},
-    {name: "Event 2"}
+    {name: "Campaign 1"},
+    {name: "Campaign 2"}
   ]
 
   constructor(private _formBuilder: FormBuilder, private _router: Router ) { }

From d21d1bff5e8df7a5750fa4e4038cde72e264f162 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Thu, 9 Apr 2020 18:43:13 -0700
Subject: [PATCH 07/17] imcludes js file with faker data for events

---
 src/app/fakerdata.js | 142 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 src/app/fakerdata.js

diff --git a/src/app/fakerdata.js b/src/app/fakerdata.js
new file mode 100644
index 0000000..f0d1fc7
--- /dev/null
+++ b/src/app/fakerdata.js
@@ -0,0 +1,142 @@
+let events = 
+[{
+    "name": "extend",
+    "displayTime": 32,
+    "freqTime": 451,
+    "image1": "http://lorempixel.com/640/480/fashion",
+    "image2": "http://lorempixel.com/640/480/nightlife",
+    "image3": "http://lorempixel.com/640/480/sports"
+}, {
+    "name": "world-class",
+    "displayTime": 103,
+    "freqTime": 84,
+    "image1": "http://lorempixel.com/640/480/fashion",
+    "image2": "http://lorempixel.com/640/480/sports",
+    "image3": "http://lorempixel.com/640/480/fashion"
+}, {
+    "name": "Mouse",
+    "displayTime": 85,
+    "freqTime": 360,
+    "image1": "http://lorempixel.com/640/480/abstract",
+    "image2": "http://lorempixel.com/640/480/food",
+    "image3": "http://lorempixel.com/640/480/sports"
+}, {
+    "name": "quantify",
+    "displayTime": 79,
+    "freqTime": 583,
+    "image1": "http://lorempixel.com/640/480/transport",
+    "image2": "http://lorempixel.com/640/480/cats",
+    "image3": "http://lorempixel.com/640/480/transport"
+}, {
+    "name": "Practical Plastic Keyboard",
+    "displayTime": 39,
+    "freqTime": 554,
+    "image1": "http://lorempixel.com/640/480/sports",
+    "image2": "http://lorempixel.com/640/480/food",
+    "image3": "http://lorempixel.com/640/480/fashion"
+}, {
+    "name": "Ford",
+    "displayTime": 11,
+    "freqTime": 460,
+    "image1": "http://lorempixel.com/640/480/food",
+    "image2": "http://lorempixel.com/640/480/technics",
+    "image3": "http://lorempixel.com/640/480/nature"
+}, {
+    "name": "Junction",
+    "displayTime": 62,
+    "freqTime": 550,
+    "image1": "http://lorempixel.com/640/480/cats",
+    "image2": "http://lorempixel.com/640/480/sports",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "Tennessee",
+    "displayTime": 98,
+    "freqTime": 44,
+    "image1": "http://lorempixel.com/640/480/transport",
+    "image2": "http://lorempixel.com/640/480/transport",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "Liberian Dollar",
+    "displayTime": 52,
+    "freqTime": 446,
+    "image1": "http://lorempixel.com/640/480/transport",
+    "image2": "http://lorempixel.com/640/480/animals",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "JSON",
+    "displayTime": 24,
+    "freqTime": 568,
+    "image1": "http://lorempixel.com/640/480/nature",
+    "image2": "http://lorempixel.com/640/480/fashion",
+    "image3": "http://lorempixel.com/640/480/city"
+}, {
+    "name": "Reduced",
+    "displayTime": 77,
+    "freqTime": 435,
+    "image1": "http://lorempixel.com/640/480/nightlife",
+    "image2": "http://lorempixel.com/640/480/fashion",
+    "image3": "http://lorempixel.com/640/480/abstract"
+}, {
+    "name": "engineer",
+    "displayTime": 2,
+    "freqTime": 65,
+    "image1": "http://lorempixel.com/640/480/cats",
+    "image2": "http://lorempixel.com/640/480/business",
+    "image3": "http://lorempixel.com/640/480/transport"
+}, {
+    "name": "Checking Account",
+    "displayTime": 91,
+    "freqTime": 92,
+    "image1": "http://lorempixel.com/640/480/nature",
+    "image2": "http://lorempixel.com/640/480/technics",
+    "image3": "http://lorempixel.com/640/480/animals"
+}, {
+    "name": "Tasty Metal Bike",
+    "displayTime": 83,
+    "freqTime": 360,
+    "image1": "http://lorempixel.com/640/480/food",
+    "image2": "http://lorempixel.com/640/480/nature",
+    "image3": "http://lorempixel.com/640/480/nature"
+}, {
+    "name": "paradigms",
+    "displayTime": 113,
+    "freqTime": 205,
+    "image1": "http://lorempixel.com/640/480/food",
+    "image2": "http://lorempixel.com/640/480/business",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "Investment Account",
+    "displayTime": 65,
+    "freqTime": 141,
+    "image1": "http://lorempixel.com/640/480/city",
+    "image2": "http://lorempixel.com/640/480/business",
+    "image3": "http://lorempixel.com/640/480/city"
+}, {
+    "name": "compress",
+    "displayTime": 112,
+    "freqTime": 215,
+    "image1": "http://lorempixel.com/640/480/cats",
+    "image2": "http://lorempixel.com/640/480/fashion",
+    "image3": "http://lorempixel.com/640/480/transport"
+}, {
+    "name": "Fresh",
+    "displayTime": 26,
+    "freqTime": 332,
+    "image1": "http://lorempixel.com/640/480/nature",
+    "image2": "http://lorempixel.com/640/480/food",
+    "image3": "http://lorempixel.com/640/480/people"
+}, {
+    "name": "Representative",
+    "displayTime": 43,
+    "freqTime": 34,
+    "image1": "http://lorempixel.com/640/480/animals",
+    "image2": "http://lorempixel.com/640/480/technics",
+    "image3": "http://lorempixel.com/640/480/sports"
+}, {
+    "name": "Hryvnia",
+    "displayTime": 67,
+    "freqTime": 88,
+    "image1": "http://lorempixel.com/640/480/technics",
+    "image2": "http://lorempixel.com/640/480/sports",
+    "image3": "http://lorempixel.com/640/480/transport"
+}]
\ No newline at end of file

From c247d0bfd934604b1862e65d49bb780fefc50875 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Sun, 12 Apr 2020 15:36:03 -0700
Subject: [PATCH 08/17] faker data imported and displaying on manage events tab

---
 src/app/app-routing.module.ts                         |  2 +-
 .../admin-form-create-event.component.ts              | 11 +++++++----
 src/app/fakerdata.js                                  |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5593323..74d52d4 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,7 +4,7 @@ import { AdminFormCreateEventComponent } from './components/admin-form-create-ev
 
 
 const routes: Routes = [
-  { path: 'new/advertising-config', component: AdminFormCreateEventComponent },
+  { path: 'new/campaign', component: AdminFormCreateEventComponent },
 ];
 
 @NgModule({
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 27f7400..0b09418 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import { Router } from '@angular/router'
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { events } from '../../fakerdata.js';
 
 @Component({
   selector: 'app-admin-form-create-event',
@@ -32,10 +33,12 @@ export class AdminFormCreateEventComponent implements OnInit {
       src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
     }
   ]
-  eventList = [
-    {name: "Campaign 1"},
-    {name: "Campaign 2"}
-  ]
+  // eventList = [
+  //   {name: "Campaign 1"},
+  //   {name: "Campaign 2"}
+  // ]
+
+  eventList = events
 
   constructor(private _formBuilder: FormBuilder, private _router: Router ) { }
 
diff --git a/src/app/fakerdata.js b/src/app/fakerdata.js
index f0d1fc7..e46eee9 100644
--- a/src/app/fakerdata.js
+++ b/src/app/fakerdata.js
@@ -1,4 +1,4 @@
-let events = 
+export let events = 
 [{
     "name": "extend",
     "displayTime": 32,

From 0f3632c2697b82960859c9acf07fd578fad309f8 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Sun, 12 Apr 2020 15:37:23 -0700
Subject: [PATCH 09/17] removed commented out code

---
 .../admin-form-create-event.component.html                   | 2 --
 .../admin-form-create-event.component.ts                     | 5 +----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index bf129aa..34064c5 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -156,8 +156,6 @@
             [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>
             <div>
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 0b09418..0b79b1f 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -33,10 +33,7 @@ export class AdminFormCreateEventComponent implements OnInit {
       src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
     }
   ]
-  // eventList = [
-  //   {name: "Campaign 1"},
-  //   {name: "Campaign 2"}
-  // ]
+
 
   eventList = events
 

From 85227a08d619a9008fd58f8e0320a4be1d7192d7 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Tue, 14 Apr 2020 20:49:00 -0700
Subject: [PATCH 10/17] faker data in json and service hooked up displaying
 events

---
 src/app/campaigns.service.spec.ts             |  12 ++
 src/app/campaigns.service.ts                  |  20 +++
 .../admin-form-create-event.component.html    |   4 +-
 .../admin-form-create-event.component.ts      |  11 +-
 src/assets/events/fakerdata.json              | 142 ++++++++++++++++++
 5 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 src/app/campaigns.service.spec.ts
 create mode 100644 src/app/campaigns.service.ts
 create mode 100644 src/assets/events/fakerdata.json

diff --git a/src/app/campaigns.service.spec.ts b/src/app/campaigns.service.spec.ts
new file mode 100644
index 0000000..f92c725
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/campaigns.service.ts b/src/app/campaigns.service.ts
new file mode 100644
index 0000000..d1d56d5
--- /dev/null
+++ b/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;
+    })
+  }
+
+
+}
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 34064c5..570cf2e 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -81,10 +81,10 @@
     </mat-tab>
 
 <!-- //////////////MANAGE EVENT/////////////////// -->
-  <mat-tab label="Manage Campaign" (click)="goToManage">
+  <mat-tab label="Manage Campaign" (click)="goToManage()">
     <p>Welcome, User!</p> 
     Campaigns List:
-    <div *ngFor="let event of eventList">
+    <div *ngFor="let event of _campaigns.events">
         
         {{event.name}}
         <button mat-raised-button color="primary" (click)="displayOptions()" *ngIf="manageButton">Manage</button>
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 0b79b1f..d8a48a4 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import { Router } from '@angular/router'
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { events } from '../../fakerdata.js';
+import { CampaignsService } from '../../../app/campaigns.service'
 
 @Component({
   selector: 'app-admin-form-create-event',
@@ -35,11 +35,16 @@ export class AdminFormCreateEventComponent implements OnInit {
   ]
 
 
-  eventList = events
 
-  constructor(private _formBuilder: FormBuilder, private _router: Router ) { }
+
+  constructor(private _formBuilder: FormBuilder, private _router: Router, private _campaigns: CampaignsService) { }
+
 
   ngOnInit() {
+    this._campaigns.getCampaigns()
+
+  // eventList = this.events
+
     this.nameFormGroup = this._formBuilder.group({
       eventName: ['', Validators.required]
 
diff --git a/src/assets/events/fakerdata.json b/src/assets/events/fakerdata.json
new file mode 100644
index 0000000..c28fea7
--- /dev/null
+++ b/src/assets/events/fakerdata.json
@@ -0,0 +1,142 @@
+
+[{
+    "name": "extend",
+    "displayTime": 32,
+    "freqTime": 451,
+    "image1": "http://lorempixel.com/640/480/fashion",
+    "image2": "http://lorempixel.com/640/480/nightlife",
+    "image3": "http://lorempixel.com/640/480/sports"
+}, {
+    "name": "world-class",
+    "displayTime": 103,
+    "freqTime": 84,
+    "image1": "http://lorempixel.com/640/480/fashion",
+    "image2": "http://lorempixel.com/640/480/sports",
+    "image3": "http://lorempixel.com/640/480/fashion"
+}, {
+    "name": "Mouse",
+    "displayTime": 85,
+    "freqTime": 360,
+    "image1": "http://lorempixel.com/640/480/abstract",
+    "image2": "http://lorempixel.com/640/480/food",
+    "image3": "http://lorempixel.com/640/480/sports"
+}, {
+    "name": "quantify",
+    "displayTime": 79,
+    "freqTime": 583,
+    "image1": "http://lorempixel.com/640/480/transport",
+    "image2": "http://lorempixel.com/640/480/cats",
+    "image3": "http://lorempixel.com/640/480/transport"
+}, {
+    "name": "Practical Plastic Keyboard",
+    "displayTime": 39,
+    "freqTime": 554,
+    "image1": "http://lorempixel.com/640/480/sports",
+    "image2": "http://lorempixel.com/640/480/food",
+    "image3": "http://lorempixel.com/640/480/fashion"
+}, {
+    "name": "Ford",
+    "displayTime": 11,
+    "freqTime": 460,
+    "image1": "http://lorempixel.com/640/480/food",
+    "image2": "http://lorempixel.com/640/480/technics",
+    "image3": "http://lorempixel.com/640/480/nature"
+}, {
+    "name": "Junction",
+    "displayTime": 62,
+    "freqTime": 550,
+    "image1": "http://lorempixel.com/640/480/cats",
+    "image2": "http://lorempixel.com/640/480/sports",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "Tennessee",
+    "displayTime": 98,
+    "freqTime": 44,
+    "image1": "http://lorempixel.com/640/480/transport",
+    "image2": "http://lorempixel.com/640/480/transport",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "Liberian Dollar",
+    "displayTime": 52,
+    "freqTime": 446,
+    "image1": "http://lorempixel.com/640/480/transport",
+    "image2": "http://lorempixel.com/640/480/animals",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "JSON",
+    "displayTime": 24,
+    "freqTime": 568,
+    "image1": "http://lorempixel.com/640/480/nature",
+    "image2": "http://lorempixel.com/640/480/fashion",
+    "image3": "http://lorempixel.com/640/480/city"
+}, {
+    "name": "Reduced",
+    "displayTime": 77,
+    "freqTime": 435,
+    "image1": "http://lorempixel.com/640/480/nightlife",
+    "image2": "http://lorempixel.com/640/480/fashion",
+    "image3": "http://lorempixel.com/640/480/abstract"
+}, {
+    "name": "engineer",
+    "displayTime": 2,
+    "freqTime": 65,
+    "image1": "http://lorempixel.com/640/480/cats",
+    "image2": "http://lorempixel.com/640/480/business",
+    "image3": "http://lorempixel.com/640/480/transport"
+}, {
+    "name": "Checking Account",
+    "displayTime": 91,
+    "freqTime": 92,
+    "image1": "http://lorempixel.com/640/480/nature",
+    "image2": "http://lorempixel.com/640/480/technics",
+    "image3": "http://lorempixel.com/640/480/animals"
+}, {
+    "name": "Tasty Metal Bike",
+    "displayTime": 83,
+    "freqTime": 360,
+    "image1": "http://lorempixel.com/640/480/food",
+    "image2": "http://lorempixel.com/640/480/nature",
+    "image3": "http://lorempixel.com/640/480/nature"
+}, {
+    "name": "paradigms",
+    "displayTime": 113,
+    "freqTime": 205,
+    "image1": "http://lorempixel.com/640/480/food",
+    "image2": "http://lorempixel.com/640/480/business",
+    "image3": "http://lorempixel.com/640/480/technics"
+}, {
+    "name": "Investment Account",
+    "displayTime": 65,
+    "freqTime": 141,
+    "image1": "http://lorempixel.com/640/480/city",
+    "image2": "http://lorempixel.com/640/480/business",
+    "image3": "http://lorempixel.com/640/480/city"
+}, {
+    "name": "compress",
+    "displayTime": 112,
+    "freqTime": 215,
+    "image1": "http://lorempixel.com/640/480/cats",
+    "image2": "http://lorempixel.com/640/480/fashion",
+    "image3": "http://lorempixel.com/640/480/transport"
+}, {
+    "name": "Fresh",
+    "displayTime": 26,
+    "freqTime": 332,
+    "image1": "http://lorempixel.com/640/480/nature",
+    "image2": "http://lorempixel.com/640/480/food",
+    "image3": "http://lorempixel.com/640/480/people"
+}, {
+    "name": "Representative",
+    "displayTime": 43,
+    "freqTime": 34,
+    "image1": "http://lorempixel.com/640/480/animals",
+    "image2": "http://lorempixel.com/640/480/technics",
+    "image3": "http://lorempixel.com/640/480/sports"
+}, {
+    "name": "Hryvnia",
+    "displayTime": 67,
+    "freqTime": 88,
+    "image1": "http://lorempixel.com/640/480/technics",
+    "image2": "http://lorempixel.com/640/480/sports",
+    "image3": "http://lorempixel.com/640/480/transport"
+}]
\ No newline at end of file

From 911e8637d6eaeda571e389ac17227a1fce2685f6 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Wed, 15 Apr 2020 20:44:12 -0700
Subject: [PATCH 11/17] event names displaying on tabs

---
 .../admin-form-create-event.component.html    |  24 +-
 .../admin-form-create-event.component.ts      |  18 +-
 src/assets/events/fakerdata.json              | 269 +++++++++---------
 3 files changed, 153 insertions(+), 158 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 570cf2e..814dc57 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -1,6 +1,6 @@
 
 <mat-tab-group>
-    <mat-tab label="Create Campaign" (click)="createEvent">
+    <mat-tab label="Create Campaign">
 
   <p>Welcome, User!</p> 
 
@@ -66,8 +66,6 @@
         [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>
         <div>
@@ -81,21 +79,28 @@
     </mat-tab>
 
 <!-- //////////////MANAGE EVENT/////////////////// -->
-  <mat-tab label="Manage Campaign" (click)="goToManage()">
+
+<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()" *ngIf="manageButton">Manage</button>
+        <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 Name</ng-template>
+                <ng-template matStepLabel>Campaign: {{event.name}}</ng-template>
                 <mat-form-field>
                         <input matInput formControlName="eventName" required placeholder="what's your campaign called?">
                 </mat-form-field>
@@ -110,7 +115,7 @@
             <ng-template matStepLabel>Timing</ng-template>
             <div id="displaySlider"> Display Time (in seconds): 
                 <mat-slider 
-                [(ngModel)] = "value"
+                [(ngModel)] = "event.displayTime"
                 [thumbLabel] = "thumbLabel"
                 [min] = "displayMin"
                 [max] = "displayMax"
@@ -119,7 +124,7 @@
             </div>
             <div> Frequency (in seconds): 
                 <mat-slider 
-                [(ngModel)] = "value2"   
+                [(ngModel)] = "event.freqTime"   
                 [thumbLabel] = "thumbLabel"
                 [min] = "freqMin"
                 [max] = "freqMax"
@@ -140,14 +145,13 @@
                 <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)">
             Campaign Line Up
-                <img *ngFor="let image of images1" src={{image.src}} style="height:100px;" cdkDrag>
+                <img src={{event.image1}} style="height:100px;" cdkDrag>
             </div>
             
             <div cdkDropList style="border-style:solid" 
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index d8a48a4..ea164eb 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -35,8 +35,6 @@ export class AdminFormCreateEventComponent implements OnInit {
   ]
 
 
-
-
   constructor(private _formBuilder: FormBuilder, private _router: Router, private _campaigns: CampaignsService) { }
 
 
@@ -62,24 +60,18 @@ export class AdminFormCreateEventComponent implements OnInit {
     }
   }
 
-  createEvent(){
-
-  }
-
   showEventDetails : boolean = false;
   manageButton : boolean = true;
   editingButton : boolean = false;
   disabled: boolean;
+  event: any;
 
-  displayOptions(){
+  displayOptions(arg){
     this.showEventDetails = !this.showEventDetails;
     this.manageButton =!this.manageButton;
     this.editingButton =!this.editingButton;
+    this.event = arg;
+    this.nameFormGroup.patchValue({
+      arg});
   }
-  
-  goToManage(){
-    this._router.navigate(['/admin-manage'])
-  }
-
-
 }
diff --git a/src/assets/events/fakerdata.json b/src/assets/events/fakerdata.json
index c28fea7..675e2f3 100644
--- a/src/assets/events/fakerdata.json
+++ b/src/assets/events/fakerdata.json
@@ -1,142 +1,141 @@
-
 [{
-    "name": "extend",
-    "displayTime": 32,
-    "freqTime": 451,
-    "image1": "http://lorempixel.com/640/480/fashion",
-    "image2": "http://lorempixel.com/640/480/nightlife",
-    "image3": "http://lorempixel.com/640/480/sports"
-}, {
-    "name": "world-class",
-    "displayTime": 103,
-    "freqTime": 84,
-    "image1": "http://lorempixel.com/640/480/fashion",
-    "image2": "http://lorempixel.com/640/480/sports",
-    "image3": "http://lorempixel.com/640/480/fashion"
+    "name": "Isle",
+    "displayTime": 98,
+    "freqTime": 469,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Hat",
+    "displayTime": 110,
+    "freqTime": 109,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
 }, {
-    "name": "Mouse",
-    "displayTime": 85,
-    "freqTime": 360,
-    "image1": "http://lorempixel.com/640/480/abstract",
-    "image2": "http://lorempixel.com/640/480/food",
-    "image3": "http://lorempixel.com/640/480/sports"
+    "name": "Checking Account",
+    "displayTime": 57,
+    "freqTime": 583,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "e-tailers",
+    "displayTime": 71,
+    "freqTime": 561,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "grey",
+    "displayTime": 106,
+    "freqTime": 138,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Director",
+    "displayTime": 20,
+    "freqTime": 245,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Trinidad and Tobago",
+    "displayTime": 109,
+    "freqTime": 127,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "deposit",
+    "displayTime": 78,
+    "freqTime": 470,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Tasty Cotton Salad",
+    "displayTime": 18,
+    "freqTime": 90,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Dynamic",
+    "displayTime": 13,
+    "freqTime": 367,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
 }, {
-    "name": "quantify",
+    "name": "Mouse",
+    "displayTime": 57,
+    "freqTime": 344,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "azure",
+    "displayTime": 71,
+    "freqTime": 513,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Bedfordshire",
+    "displayTime": 97,
+    "freqTime": 196,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "PNG",
+    "displayTime": 70,
+    "freqTime": 305,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "European Unit of Account 9(E.U.A.-9)",
     "displayTime": 79,
-    "freqTime": 583,
-    "image1": "http://lorempixel.com/640/480/transport",
-    "image2": "http://lorempixel.com/640/480/cats",
-    "image3": "http://lorempixel.com/640/480/transport"
-}, {
-    "name": "Practical Plastic Keyboard",
-    "displayTime": 39,
-    "freqTime": 554,
-    "image1": "http://lorempixel.com/640/480/sports",
-    "image2": "http://lorempixel.com/640/480/food",
-    "image3": "http://lorempixel.com/640/480/fashion"
-}, {
-    "name": "Ford",
-    "displayTime": 11,
-    "freqTime": 460,
-    "image1": "http://lorempixel.com/640/480/food",
-    "image2": "http://lorempixel.com/640/480/technics",
-    "image3": "http://lorempixel.com/640/480/nature"
-}, {
-    "name": "Junction",
-    "displayTime": 62,
-    "freqTime": 550,
-    "image1": "http://lorempixel.com/640/480/cats",
-    "image2": "http://lorempixel.com/640/480/sports",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "Tennessee",
-    "displayTime": 98,
-    "freqTime": 44,
-    "image1": "http://lorempixel.com/640/480/transport",
-    "image2": "http://lorempixel.com/640/480/transport",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "Liberian Dollar",
-    "displayTime": 52,
-    "freqTime": 446,
-    "image1": "http://lorempixel.com/640/480/transport",
-    "image2": "http://lorempixel.com/640/480/animals",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "JSON",
-    "displayTime": 24,
-    "freqTime": 568,
-    "image1": "http://lorempixel.com/640/480/nature",
-    "image2": "http://lorempixel.com/640/480/fashion",
-    "image3": "http://lorempixel.com/640/480/city"
-}, {
-    "name": "Reduced",
-    "displayTime": 77,
-    "freqTime": 435,
-    "image1": "http://lorempixel.com/640/480/nightlife",
-    "image2": "http://lorempixel.com/640/480/fashion",
-    "image3": "http://lorempixel.com/640/480/abstract"
-}, {
-    "name": "engineer",
-    "displayTime": 2,
-    "freqTime": 65,
-    "image1": "http://lorempixel.com/640/480/cats",
-    "image2": "http://lorempixel.com/640/480/business",
-    "image3": "http://lorempixel.com/640/480/transport"
+    "freqTime": 27,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
 }, {
-    "name": "Checking Account",
-    "displayTime": 91,
-    "freqTime": 92,
-    "image1": "http://lorempixel.com/640/480/nature",
-    "image2": "http://lorempixel.com/640/480/technics",
-    "image3": "http://lorempixel.com/640/480/animals"
-}, {
-    "name": "Tasty Metal Bike",
-    "displayTime": 83,
-    "freqTime": 360,
-    "image1": "http://lorempixel.com/640/480/food",
-    "image2": "http://lorempixel.com/640/480/nature",
-    "image3": "http://lorempixel.com/640/480/nature"
-}, {
-    "name": "paradigms",
+    "name": "Supervisor",
     "displayTime": 113,
-    "freqTime": 205,
-    "image1": "http://lorempixel.com/640/480/food",
-    "image2": "http://lorempixel.com/640/480/business",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "Investment Account",
-    "displayTime": 65,
-    "freqTime": 141,
-    "image1": "http://lorempixel.com/640/480/city",
-    "image2": "http://lorempixel.com/640/480/business",
-    "image3": "http://lorempixel.com/640/480/city"
-}, {
-    "name": "compress",
-    "displayTime": 112,
-    "freqTime": 215,
-    "image1": "http://lorempixel.com/640/480/cats",
-    "image2": "http://lorempixel.com/640/480/fashion",
-    "image3": "http://lorempixel.com/640/480/transport"
-}, {
-    "name": "Fresh",
-    "displayTime": 26,
-    "freqTime": 332,
-    "image1": "http://lorempixel.com/640/480/nature",
-    "image2": "http://lorempixel.com/640/480/food",
-    "image3": "http://lorempixel.com/640/480/people"
-}, {
-    "name": "Representative",
-    "displayTime": 43,
-    "freqTime": 34,
-    "image1": "http://lorempixel.com/640/480/animals",
-    "image2": "http://lorempixel.com/640/480/technics",
-    "image3": "http://lorempixel.com/640/480/sports"
-}, {
-    "name": "Hryvnia",
-    "displayTime": 67,
-    "freqTime": 88,
-    "image1": "http://lorempixel.com/640/480/technics",
-    "image2": "http://lorempixel.com/640/480/sports",
-    "image3": "http://lorempixel.com/640/480/transport"
+    "freqTime": 593,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "bifurcated",
+    "displayTime": 45,
+    "freqTime": 482,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "benchmark",
+    "displayTime": 51,
+    "freqTime": 79,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "pricing structure",
+    "displayTime": 64,
+    "freqTime": 190,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+}, {
+    "name": "Cuban Peso Peso Convertible",
+    "displayTime": 76,
+    "freqTime": 285,
+    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
+    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
 }]
\ No newline at end of file

From fa92666cc317cdcea1139bc843a2a74901f3397b Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Wed, 15 Apr 2020 22:08:25 -0700
Subject: [PATCH 12/17] drag and drop working with pulling images from
 fakerdata array

---
 .../admin-form-create-event.component.html    |  16 +-
 .../admin-form-create-event.component.ts      |  41 +--
 src/assets/events/fakerdata.json              | 248 ++++++++----------
 3 files changed, 151 insertions(+), 154 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 814dc57..2beafdc 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -146,21 +146,27 @@
                 <button mat-raised-button color="secondary">Upload</button>
             </div>
             <div cdkDropList style="border-style:solid" 
-            [cdkDropListData]="images1"
+            [cdkDropListData]="currentCampaignImages"
             #LineUpList="cdkDropList" 
             [cdkDropListConnectedTo]="GalleryList"
             (cdkDropListDropped)="drop($event)">
             Campaign Line Up
-                <img src={{event.image1}} style="height:100px;" cdkDrag>
+            <div *ngFor="let image of currentCampaignImages">
+                <img [src]="image" style="height:100px;" cdkDrag>
+            </div>
+                <!-- <img  src={{event.campaignImages.image2}} style="height:100px;" cdkDrag> -->
             </div>
             
             <div cdkDropList style="border-style:solid" 
-            [cdkDropListData]="images2"
+            [cdkDropListData]="currentGalleryImages"
             #GalleryList="cdkDropList"
             [cdkDropListConnectedTo]="LineUpList"
-            (cdkDropListDropped)="drop($event)">
+            (cdkDropListDropped)="drop($event)">    
                 Gallery
-                <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
+                <div *ngFor="let image of currentGalleryImages">
+                <img [src]="image" style="height:100px;" cdkDrag>
+                </div>
+                <!-- <img  src={{event.galleryImages.image3}} style="height:100px;" cdkDrag> -->
             </div>
             <div>
                <button mat-raised-button matStepperNext color="primary">Update Campaign</button>
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index ea164eb..3b94b47 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -18,21 +18,21 @@ export class AdminFormCreateEventComponent implements OnInit {
   freqMin = 10;
   displayMax = 120;
   freqMax = 600;
-  images1 = [
-    { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-    },
-    {
-      src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
-    }
-  ]
+  // images1 = [
+  //   { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+  //   },
+  //   {
+  //     src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
+  //   }
+  // ]
 
-  images2 = [
-    { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-    },
-    {
-      src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
-    }
-  ]
+  // images2 = [
+  //   { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+  //   },
+  //   {
+  //     src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
+  //   }
+  // ]
 
 
   constructor(private _formBuilder: FormBuilder, private _router: Router, private _campaigns: CampaignsService) { }
@@ -58,6 +58,7 @@ export class AdminFormCreateEventComponent implements OnInit {
                         event.previousIndex,
                         event.currentIndex);
     }
+    // console.log(event.container.data)
   }
 
   showEventDetails : boolean = false;
@@ -65,7 +66,10 @@ export class AdminFormCreateEventComponent implements OnInit {
   editingButton : boolean = false;
   disabled: boolean;
   event: any;
+  currentCampaignImages: any = [];
+  currentGalleryImages: any= [];
 
+ 
   displayOptions(arg){
     this.showEventDetails = !this.showEventDetails;
     this.manageButton =!this.manageButton;
@@ -73,5 +77,12 @@ export class AdminFormCreateEventComponent implements OnInit {
     this.event = arg;
     this.nameFormGroup.patchValue({
       arg});
+    console.log(this.event.campaignImages)
+    this.currentCampaignImages = [...this.event.campaignImages]
+    this.currentGalleryImages = [...this.event.galleryImages ]
+    
+
+    }
   }
-}
+
+
diff --git a/src/assets/events/fakerdata.json b/src/assets/events/fakerdata.json
index 675e2f3..d9b8b8b 100644
--- a/src/assets/events/fakerdata.json
+++ b/src/assets/events/fakerdata.json
@@ -1,141 +1,121 @@
 [{
-    "name": "Isle",
-    "displayTime": 98,
-    "freqTime": 469,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Hat",
-    "displayTime": 110,
-    "freqTime": 109,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Checking Account",
-    "displayTime": 57,
-    "freqTime": 583,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "e-tailers",
-    "displayTime": 71,
-    "freqTime": 561,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "grey",
-    "displayTime": 106,
-    "freqTime": 138,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Director",
-    "displayTime": 20,
-    "freqTime": 245,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Trinidad and Tobago",
-    "displayTime": 109,
-    "freqTime": 127,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+    "name": "Colorado",
+    "displayTime": 101,
+    "freqTime": 313,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Savings Account",
+    "displayTime": 76,
+    "freqTime": 48,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
 }, {
     "name": "deposit",
-    "displayTime": 78,
-    "freqTime": 470,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Tasty Cotton Salad",
-    "displayTime": 18,
-    "freqTime": 90,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Dynamic",
-    "displayTime": 13,
-    "freqTime": 367,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Mouse",
-    "displayTime": 57,
-    "freqTime": 344,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "azure",
-    "displayTime": 71,
-    "freqTime": 513,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Bedfordshire",
+    "displayTime": 45,
+    "freqTime": 333,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Games",
+    "displayTime": 114,
+    "freqTime": 303,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Kids",
     "displayTime": 97,
-    "freqTime": 196,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+    "freqTime": 19,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
 }, {
-    "name": "PNG",
+    "name": "Compatible",
+    "displayTime": 66,
+    "freqTime": 42,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Chips",
+    "displayTime": 57,
+    "freqTime": 302,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "challenge",
+    "displayTime": 2,
+    "freqTime": 560,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "cultivate",
+    "displayTime": 39,
+    "freqTime": 239,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "deposit",
+    "displayTime": 32,
+    "freqTime": 553,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "users",
+    "displayTime": 86,
+    "freqTime": 105,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "invoice",
+    "displayTime": 104,
+    "freqTime": 60,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Officer",
+    "displayTime": 107,
+    "freqTime": 374,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Uruguay",
+    "displayTime": 8,
+    "freqTime": 391,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Sports",
+    "displayTime": 36,
+    "freqTime": 502,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Rubber",
+    "displayTime": 37,
+    "freqTime": 44,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Intuitive",
+    "displayTime": 35,
+    "freqTime": 114,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Tasty Wooden Chicken",
     "displayTime": 70,
-    "freqTime": 305,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "European Unit of Account 9(E.U.A.-9)",
-    "displayTime": 79,
-    "freqTime": 27,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Supervisor",
-    "displayTime": 113,
-    "freqTime": 593,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "bifurcated",
-    "displayTime": 45,
-    "freqTime": 482,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "benchmark",
-    "displayTime": 51,
-    "freqTime": 79,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "pricing structure",
-    "displayTime": 64,
-    "freqTime": 190,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-}, {
-    "name": "Cuban Peso Peso Convertible",
-    "displayTime": 76,
-    "freqTime": 285,
-    "image1": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image2": "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg",
-    "image3": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
+    "freqTime": 325,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Montana",
+    "displayTime": 94,
+    "freqTime": 415,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
+}, {
+    "name": "Optimization",
+    "displayTime": 55,
+    "freqTime": 156,
+    "campaignImages": ["https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg", "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"],
+    "galleryImages": ["https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"]
 }]
\ No newline at end of file

From 31ac82dec0894540b92d0120d110d47e17589db0 Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Mon, 20 Apr 2020 20:52:37 -0700
Subject: [PATCH 13/17] middle of incorporating image list

---
 .../admin-form-create-event.component.html    | 18 +++++++++++++++++-
 .../admin-form-create-event.component.ts      | 19 ++-----------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 2beafdc..ed8218a 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -44,7 +44,23 @@
       
     <mat-step>
         <ng-template matStepLabel>Content</ng-template>
+        
+        <ul class="mdc-image-list my-image-list">
+            <li class="mdc-image-list__item">
+              <div class="mdc-image-list__image-aspect-container">
+                <img class="mdc-image-list__image" *ngFor="let event of _campaigns.events" src={{event.image}}>
+              </div>
+              <div class="mdc-image-list__supporting">
+                <span class="mdc-image-list__label">Text label</span>
+              </div>
+            </li>
+            ...
+          </ul>
+
+
 
+
+        <!-- ////////////////DRAG AND DROP FEATURE///////////////// -->
         <div style="border-style:solid">
             Add Content
             <input type="file">
@@ -152,7 +168,7 @@
             (cdkDropListDropped)="drop($event)">
             Campaign Line Up
             <div *ngFor="let image of currentCampaignImages">
-                <img [src]="image" style="height:100px;" cdkDrag>
+                <img [src] ="image" style="height:100px;" cdkDrag>
             </div>
                 <!-- <img  src={{event.campaignImages.image2}} style="height:100px;" cdkDrag> -->
             </div>
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 3b94b47..b836d31 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -18,21 +18,7 @@ export class AdminFormCreateEventComponent implements OnInit {
   freqMin = 10;
   displayMax = 120;
   freqMax = 600;
-  // images1 = [
-  //   { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-  //   },
-  //   {
-  //     src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
-  //   }
-  // ]
-
-  // images2 = [
-  //   { src : "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg?crop=0.669xw:1.00xh;0.331xw,0&resize=640:*"
-  //   },
-  //   {
-  //     src : "https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg"
-  //   }
-  // ]
+  
 
 
   constructor(private _formBuilder: FormBuilder, private _router: Router, private _campaigns: CampaignsService) { }
@@ -41,7 +27,6 @@ export class AdminFormCreateEventComponent implements OnInit {
   ngOnInit() {
     this._campaigns.getCampaigns()
 
-  // eventList = this.events
 
     this.nameFormGroup = this._formBuilder.group({
       eventName: ['', Validators.required]
@@ -58,7 +43,7 @@ export class AdminFormCreateEventComponent implements OnInit {
                         event.previousIndex,
                         event.currentIndex);
     }
-    // console.log(event.container.data)
+    
   }
 
   showEventDetails : boolean = false;

From b3829f2551dd8842a9e40ed4a882a8a6b92a93cd Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Fri, 24 Apr 2020 14:19:00 -0700
Subject: [PATCH 14/17] images displayed and selecting

---
 src/app/app.module.ts                         |   5 +-
 .../admin-form-create-event.component.html    |  47 ++++--
 .../admin-form-create-event.component.scss    |  36 +++++
 .../admin-form-create-event.component.ts      |  59 ++++++--
 src/app/fakerdata.js                          | 142 ------------------
 5 files changed, 123 insertions(+), 166 deletions(-)
 delete mode 100644 src/app/fakerdata.js

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9706311..a171255 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,7 +7,9 @@ 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';
@@ -51,6 +53,7 @@ import {
     FormsModule,
     DragDropModule,
     MatCardModule,
+    CommonModule
   ],
   providers: [CurrencyPipe],
   bootstrap: [AppComponent]
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index ed8218a..9d6db38 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -44,18 +44,19 @@
       
     <mat-step>
         <ng-template matStepLabel>Content</ng-template>
-        
+<!--         
         <ul class="mdc-image-list my-image-list">
+         <div *ngFor="let event of _campaigns.events">
             <li class="mdc-image-list__item">
               <div class="mdc-image-list__image-aspect-container">
-                <img class="mdc-image-list__image" *ngFor="let event of _campaigns.events" src={{event.image}}>
+                <img class="mdc-image-list__image"  [src]="event.galleryImages">
               </div>
               <div class="mdc-image-list__supporting">
                 <span class="mdc-image-list__label">Text label</span>
               </div>
             </li>
-            ...
-          </ul>
+         </div>
+          </ul> -->
 
 
 
@@ -66,8 +67,30 @@
             <input type="file">
             <button mat-raised-button color="secondary">Upload</button>
         </div>
+
+        <mat-card class="row"> 
+            <!-- //////GALLERY/////// -->
+        <div style='border-style: solid; height: 200px; width: 900px'>
+        <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>
+        <mat-card>
+            <!-- /////CAMPAIGN IMAGES////// -->
+            <div style=' border-style: solid; height: 200px; width: 900px'>
+            <div class="col" *ngFor="let image of campaignImages" style='display: inline'>
+                <img  [src]="image" height='150px' width='150px'>
+            </div>
+            </div>
+              
         
-        <div cdkDropList style="border-style:solid" 
+        </mat-card>
+        <!-- ///////////////////DRAG AND DROP FUNCTIONAILTY///////////////////////// -->
+        <!-- <div cdkDropList style="border-style:solid" 
         [cdkDropListData]="images1"
         #LineUpList="cdkDropList" 
         [cdkDropListConnectedTo]="GalleryList"
@@ -83,7 +106,7 @@
         (cdkDropListDropped)="drop($event)">
             Gallery
             <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
-        </div>
+        </div> -->
         <div>
             <button mat-raised-button matStepperNext color="primary">Create My Campaign</button>
         </div>
@@ -161,7 +184,8 @@
                 <input type="file">
                 <button mat-raised-button color="secondary">Upload</button>
             </div>
-            <div cdkDropList style="border-style:solid" 
+            <!-- ////////////////DRAG AND DROP FUNCTIONAILTY////////// -->
+            <!-- <div cdkDropList style="border-style:solid" 
             [cdkDropListData]="currentCampaignImages"
             #LineUpList="cdkDropList" 
             [cdkDropListConnectedTo]="GalleryList"
@@ -169,10 +193,7 @@
             Campaign Line Up
             <div *ngFor="let image of currentCampaignImages">
                 <img [src] ="image" style="height:100px;" cdkDrag>
-            </div>
-                <!-- <img  src={{event.campaignImages.image2}} style="height:100px;" cdkDrag> -->
-            </div>
-            
+                       
             <div cdkDropList style="border-style:solid" 
             [cdkDropListData]="currentGalleryImages"
             #GalleryList="cdkDropList"
@@ -182,8 +203,8 @@
                 <div *ngFor="let image of currentGalleryImages">
                 <img [src]="image" style="height:100px;" cdkDrag>
                 </div>
-                <!-- <img  src={{event.galleryImages.image3}} style="height:100px;" cdkDrag> -->
-            </div>
+                
+            </div> -->
             <div>
                <button mat-raised-button matStepperNext color="primary">Update Campaign</button>
             </div>
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.scss b/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
index 2716ee5..81a4254 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
@@ -7,3 +7,39 @@ p {
     padding-top: 1.5em;
 }
 
+.images-layout {
+    height: 100px;
+    width: 100px;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .col {
+    flex: 1 0 18%; /* The important bit. This percentage decides your columns. 
+   The percent can be px. It just represents your minimum starting width.
+    */
+    margin: 5px;
+    height: 120px;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .selected {
+    border-style: solid;
+    border-width: 10px;
+    border-color: blue;
+  }
+ 
+//   .my_class {
+//   @if this.status == true {
+//     color: blue;
+  
+//   } @else {
+//     color: red;
+//   }
+// }
\ No newline at end of file
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index b836d31..0ee4735 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -18,7 +18,13 @@ export class AdminFormCreateEventComponent implements OnInit {
   freqMin = 10;
   displayMax = 120;
   freqMax = 600;
-  
+  showEventDetails : boolean = false;
+  manageButton : boolean = true;
+  editingButton : boolean = false;
+  disabled: boolean;
+  event: any;
+  // currentCampaignImages: any = [];
+  // currentGalleryImages: any= [];
 
 
   constructor(private _formBuilder: FormBuilder, private _router: Router, private _campaigns: CampaignsService) { }
@@ -46,14 +52,9 @@ export class AdminFormCreateEventComponent implements OnInit {
     
   }
 
-  showEventDetails : boolean = false;
-  manageButton : boolean = true;
-  editingButton : boolean = false;
-  disabled: boolean;
-  event: any;
-  currentCampaignImages: any = [];
-  currentGalleryImages: any= [];
 
+  
+  
  
   displayOptions(arg){
     this.showEventDetails = !this.showEventDetails;
@@ -63,11 +64,49 @@ export class AdminFormCreateEventComponent implements OnInit {
     this.nameFormGroup.patchValue({
       arg});
     console.log(this.event.campaignImages)
-    this.currentCampaignImages = [...this.event.campaignImages]
-    this.currentGalleryImages = [...this.event.galleryImages ]
+    // this.currentCampaignImages = [...this.event.campaignImages]
+    // this.currentGalleryImages = [...this.event.galleryImages ]
     
 
     }
+    // status: boolean = false;
+    // clickEvent(){
+      
+    //   this.status = !this.status;  
+      
+
+    // }
+
+    gallery = [
+      {
+        id: 1, 
+        path: 'https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg'
+      },
+        {
+        id: 2, 
+        path: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/colorful-of-dahlia-pink-flower-in-beautiful-garden-royalty-free-image-825886130-1554743243.jpg',
+      },
+        {
+        id: 3, 
+        path: 'https://www.gardendesign.com/pictures/images/263x300Exact_62x0/site_3/helianthus-yellow-flower-pixabay_11863.jpg'
+      },
+    ];
+
+    campaignImages;
+
+    selectedImages = {};
+
+
+  onSelect({id, path}) {
+    if (this.selectedImages[id]) {
+      delete this.selectedImages[id]
+    } else {
+      this.selectedImages[id] = path;
+    }
+    this.campaignImages = Object.values(this.selectedImages)
+  }
+    
+  
   }
 
 
diff --git a/src/app/fakerdata.js b/src/app/fakerdata.js
deleted file mode 100644
index e46eee9..0000000
--- a/src/app/fakerdata.js
+++ /dev/null
@@ -1,142 +0,0 @@
-export let events = 
-[{
-    "name": "extend",
-    "displayTime": 32,
-    "freqTime": 451,
-    "image1": "http://lorempixel.com/640/480/fashion",
-    "image2": "http://lorempixel.com/640/480/nightlife",
-    "image3": "http://lorempixel.com/640/480/sports"
-}, {
-    "name": "world-class",
-    "displayTime": 103,
-    "freqTime": 84,
-    "image1": "http://lorempixel.com/640/480/fashion",
-    "image2": "http://lorempixel.com/640/480/sports",
-    "image3": "http://lorempixel.com/640/480/fashion"
-}, {
-    "name": "Mouse",
-    "displayTime": 85,
-    "freqTime": 360,
-    "image1": "http://lorempixel.com/640/480/abstract",
-    "image2": "http://lorempixel.com/640/480/food",
-    "image3": "http://lorempixel.com/640/480/sports"
-}, {
-    "name": "quantify",
-    "displayTime": 79,
-    "freqTime": 583,
-    "image1": "http://lorempixel.com/640/480/transport",
-    "image2": "http://lorempixel.com/640/480/cats",
-    "image3": "http://lorempixel.com/640/480/transport"
-}, {
-    "name": "Practical Plastic Keyboard",
-    "displayTime": 39,
-    "freqTime": 554,
-    "image1": "http://lorempixel.com/640/480/sports",
-    "image2": "http://lorempixel.com/640/480/food",
-    "image3": "http://lorempixel.com/640/480/fashion"
-}, {
-    "name": "Ford",
-    "displayTime": 11,
-    "freqTime": 460,
-    "image1": "http://lorempixel.com/640/480/food",
-    "image2": "http://lorempixel.com/640/480/technics",
-    "image3": "http://lorempixel.com/640/480/nature"
-}, {
-    "name": "Junction",
-    "displayTime": 62,
-    "freqTime": 550,
-    "image1": "http://lorempixel.com/640/480/cats",
-    "image2": "http://lorempixel.com/640/480/sports",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "Tennessee",
-    "displayTime": 98,
-    "freqTime": 44,
-    "image1": "http://lorempixel.com/640/480/transport",
-    "image2": "http://lorempixel.com/640/480/transport",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "Liberian Dollar",
-    "displayTime": 52,
-    "freqTime": 446,
-    "image1": "http://lorempixel.com/640/480/transport",
-    "image2": "http://lorempixel.com/640/480/animals",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "JSON",
-    "displayTime": 24,
-    "freqTime": 568,
-    "image1": "http://lorempixel.com/640/480/nature",
-    "image2": "http://lorempixel.com/640/480/fashion",
-    "image3": "http://lorempixel.com/640/480/city"
-}, {
-    "name": "Reduced",
-    "displayTime": 77,
-    "freqTime": 435,
-    "image1": "http://lorempixel.com/640/480/nightlife",
-    "image2": "http://lorempixel.com/640/480/fashion",
-    "image3": "http://lorempixel.com/640/480/abstract"
-}, {
-    "name": "engineer",
-    "displayTime": 2,
-    "freqTime": 65,
-    "image1": "http://lorempixel.com/640/480/cats",
-    "image2": "http://lorempixel.com/640/480/business",
-    "image3": "http://lorempixel.com/640/480/transport"
-}, {
-    "name": "Checking Account",
-    "displayTime": 91,
-    "freqTime": 92,
-    "image1": "http://lorempixel.com/640/480/nature",
-    "image2": "http://lorempixel.com/640/480/technics",
-    "image3": "http://lorempixel.com/640/480/animals"
-}, {
-    "name": "Tasty Metal Bike",
-    "displayTime": 83,
-    "freqTime": 360,
-    "image1": "http://lorempixel.com/640/480/food",
-    "image2": "http://lorempixel.com/640/480/nature",
-    "image3": "http://lorempixel.com/640/480/nature"
-}, {
-    "name": "paradigms",
-    "displayTime": 113,
-    "freqTime": 205,
-    "image1": "http://lorempixel.com/640/480/food",
-    "image2": "http://lorempixel.com/640/480/business",
-    "image3": "http://lorempixel.com/640/480/technics"
-}, {
-    "name": "Investment Account",
-    "displayTime": 65,
-    "freqTime": 141,
-    "image1": "http://lorempixel.com/640/480/city",
-    "image2": "http://lorempixel.com/640/480/business",
-    "image3": "http://lorempixel.com/640/480/city"
-}, {
-    "name": "compress",
-    "displayTime": 112,
-    "freqTime": 215,
-    "image1": "http://lorempixel.com/640/480/cats",
-    "image2": "http://lorempixel.com/640/480/fashion",
-    "image3": "http://lorempixel.com/640/480/transport"
-}, {
-    "name": "Fresh",
-    "displayTime": 26,
-    "freqTime": 332,
-    "image1": "http://lorempixel.com/640/480/nature",
-    "image2": "http://lorempixel.com/640/480/food",
-    "image3": "http://lorempixel.com/640/480/people"
-}, {
-    "name": "Representative",
-    "displayTime": 43,
-    "freqTime": 34,
-    "image1": "http://lorempixel.com/640/480/animals",
-    "image2": "http://lorempixel.com/640/480/technics",
-    "image3": "http://lorempixel.com/640/480/sports"
-}, {
-    "name": "Hryvnia",
-    "displayTime": 67,
-    "freqTime": 88,
-    "image1": "http://lorempixel.com/640/480/technics",
-    "image2": "http://lorempixel.com/640/480/sports",
-    "image3": "http://lorempixel.com/640/480/transport"
-}]
\ No newline at end of file

From 76837ee85649e9552534a24ee18c7c138739aeff Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Sun, 26 Apr 2020 22:31:33 -0700
Subject: [PATCH 15/17] drag and drop not allowing array on campaign images to
 be updated

---
 .../admin-form-create-event.component.html    | 16 ++++++---
 .../admin-form-create-event.component.ts      | 34 +++++++++----------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 9d6db38..f63e8f3 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -71,6 +71,7 @@
         <mat-card class="row"> 
             <!-- //////GALLERY/////// -->
         <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]}"
@@ -81,10 +82,17 @@
         </mat-card>
         <mat-card>
             <!-- /////CAMPAIGN IMAGES////// -->
-            <div style=' border-style: solid; height: 200px; width: 900px'>
-            <div class="col" *ngFor="let image of campaignImages" style='display: inline'>
-                <img  [src]="image" height='150px' width='150px'>
-            </div>
+            <div cdkDropList style=' border-style: solid; height: 200px; width: 900px' 
+                
+             
+                (cdkDropListDropped)="drop($event)"
+            >
+                Campaign Line-Up
+                <div class="col" *ngFor="let image of campaignImages" style='display: inline'>
+                    <img  [src]="image" height='150px' width='150px' cdkDrag>
+                </div>
+
+
             </div>
               
         
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 0ee4735..25d5595 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -40,17 +40,18 @@ export class AdminFormCreateEventComponent implements OnInit {
     })
   }
 
-    drop(event: CdkDragDrop<string[]>) {
-      if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-    } else {
-      transferArrayItem(event.previousContainer.data,
-                        event.container.data,
-                        event.previousIndex,
-                        event.currentIndex);
-    }
+    // drop(event: CdkDragDrop<string[]>) {
+    //   if (event.previousContainer === event.container) {
+    //   moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    // } else {
+    //   transferArrayItem(event.previousContainer.data,
+    //                     event.container.data,
+    //                     event.previousIndex,
+    //                     event.currentIndex);
+    // }
     
-  }
+    
+  // }
 
 
   
@@ -69,13 +70,7 @@ export class AdminFormCreateEventComponent implements OnInit {
     
 
     }
-    // status: boolean = false;
-    // clickEvent(){
-      
-    //   this.status = !this.status;  
-      
-
-    // }
+  
 
     gallery = [
       {
@@ -106,6 +101,11 @@ export class AdminFormCreateEventComponent implements OnInit {
     this.campaignImages = Object.values(this.selectedImages)
   }
     
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.campaignImages, event.previousIndex, event.currentIndex);
+  }
+
   
   }
 

From f8c19ea3a8c4eddab1abb7e10b825525183dc9f6 Mon Sep 17 00:00:00 2001
From: "robertlb4@gmail.com" <robertlb4@gmail.com>
Date: Mon, 27 Apr 2020 18:41:29 -0700
Subject: [PATCH 16/17] update drag and drop implementation to properly update
 with selected photos

---
 .../admin-form-create-event.component.html    | 32 +++++++++----------
 .../admin-form-create-event.component.scss    | 10 +++---
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index f63e8f3..93a73ea 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -79,24 +79,22 @@
             >
         </div> 
     </div>
-        </mat-card>
-        <mat-card>
-            <!-- /////CAMPAIGN IMAGES////// -->
-            <div cdkDropList style=' border-style: solid; height: 200px; width: 900px' 
-                
-             
-                (cdkDropListDropped)="drop($event)"
-            >
-                Campaign Line-Up
-                <div class="col" *ngFor="let image of campaignImages" style='display: inline'>
-                    <img  [src]="image" height='150px' width='150px' cdkDrag>
-                </div>
-
+      </mat-card>
+      <mat-card>
+        <!-- /////CAMPAIGN IMAGES////// -->
+        <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>
 
-            </div>
-              
-        
-        </mat-card>
+      </mat-card>
         <!-- ///////////////////DRAG AND DROP FUNCTIONAILTY///////////////////////// -->
         <!-- <div cdkDropList style="border-style:solid" 
         [cdkDropListData]="images1"
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.scss b/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
index 81a4254..4626461 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
@@ -18,15 +18,17 @@ p {
   }
   
   .col {
-    flex: 1 0 18%; /* The important bit. This percentage decides your columns. 
-   The percent can be px. It just represents your minimum starting width.
-    */
+  //   flex: 1 0 18%; /* The important bit. This percentage decides your columns. 
+  //  The percent can be px. It just represents your minimum starting width.
+  //   */
     margin: 5px;
-    height: 120px;
+    height: 150px;
     color: white;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
+    cursor: move;
   }
 
   .selected {

From bff228b6940eb5f329f20bfc2f4a30a944c0055e Mon Sep 17 00:00:00 2001
From: Rae <raemdonaldson@gmail.com>
Date: Mon, 27 Apr 2020 22:00:09 -0700
Subject: [PATCH 17/17] form controls added for values in slider

---
 .../admin-form-create-event.component.html    | 390 ++++++++----------
 .../admin-form-create-event.component.scss    |  11 -
 .../admin-form-create-event.component.ts      |  51 ++-
 3 files changed, 202 insertions(+), 250 deletions(-)

diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.html b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
index 93a73ea..2194593 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.html
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.html
@@ -2,225 +2,191 @@
 <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>Campaign Name</ng-template>
-            <mat-form-field>
-                    <input matInput formControlName="eventName" required placeholder="what's your campaign called?">
-            </mat-form-field>
-            <div>
-            <button mat-raised-button matStepperNext color="primary">+ Campaign</button>
-            </div>
+            <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>
+
+                    <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-horizontal-stepper>
         </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>
-<!--         
-        <ul class="mdc-image-list my-image-list">
-         <div *ngFor="let event of _campaigns.events">
-            <li class="mdc-image-list__item">
-              <div class="mdc-image-list__image-aspect-container">
-                <img class="mdc-image-list__image"  [src]="event.galleryImages">
-              </div>
-              <div class="mdc-image-list__supporting">
-                <span class="mdc-image-list__label">Text label</span>
-              </div>
-            </li>
-         </div>
-          </ul> -->
-
-
-
-
-        <!-- ////////////////DRAG AND DROP FEATURE///////////////// -->
-        <div style="border-style:solid">
-            Add Content
-            <input type="file">
-            <button mat-raised-button color="secondary">Upload</button>
-        </div>
-
-        <mat-card class="row"> 
-            <!-- //////GALLERY/////// -->
-        <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>
-      <mat-card>
-        <!-- /////CAMPAIGN IMAGES////// -->
-        <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>
-        <!-- ///////////////////DRAG AND DROP FUNCTIONAILTY///////////////////////// -->
-        <!-- <div cdkDropList style="border-style:solid" 
-        [cdkDropListData]="images1"
-        #LineUpList="cdkDropList" 
-        [cdkDropListConnectedTo]="GalleryList"
-        (cdkDropListDropped)="drop($event)">
-        Campaign 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
-            <img *ngFor="let image of images2" src={{image.src}} style="height:100px;" cdkDrag>
-        </div> -->
-        <div>
-            <button mat-raised-button matStepperNext color="primary">Create My Campaign</button>
-        </div>
-        
-    </mat-step>
-
-
-    </mat-horizontal-stepper>
     </mat-tab>
 
-<!-- //////////////MANAGE EVENT/////////////////// -->
-
-<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>
+<!-- //////////////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="eventName" required placeholder="what's your campaign called?">
-                </mat-form-field>
-                <div>
-                <button mat-raised-button matStepperNext color="primary">Rename Campaign</button>
-                <button mat-raised-button matStepperNext color="secondary">Skip</button>
+        </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>
-                
-            </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>
-            <!-- ////////////////DRAG AND DROP FUNCTIONAILTY////////// -->
-            <!-- <div cdkDropList style="border-style:solid" 
-            [cdkDropListData]="currentCampaignImages"
-            #LineUpList="cdkDropList" 
-            [cdkDropListConnectedTo]="GalleryList"
-            (cdkDropListDropped)="drop($event)">
-            Campaign Line Up
-            <div *ngFor="let image of currentCampaignImages">
-                <img [src] ="image" style="height:100px;" cdkDrag>
-                       
-            <div cdkDropList style="border-style:solid" 
-            [cdkDropListData]="currentGalleryImages"
-            #GalleryList="cdkDropList"
-            [cdkDropListConnectedTo]="LineUpList"
-            (cdkDropListDropped)="drop($event)">    
-                Gallery
-                <div *ngFor="let image of currentGalleryImages">
-                <img [src]="image" style="height:100px;" cdkDrag>
+                <div> Frequency (in seconds): 
+                    <mat-slider 
+                    [(ngModel)] = "event.freqTime"   
+                    [thumbLabel] = "thumbLabel"
+                    [min] = "freqMin"
+                    [max] = "freqMax"
+                    >
+                    </mat-slider>
                 </div>
-                
-            </div> -->
-            <div>
-               <button mat-raised-button matStepperNext color="primary">Update Campaign</button>
-            </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>
-    
-    
+            <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>
 </mat-tab-group>
\ No newline at end of file
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.scss b/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
index 4626461..c0076ad 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.scss
@@ -18,9 +18,6 @@ p {
   }
   
   .col {
-  //   flex: 1 0 18%; /* The important bit. This percentage decides your columns. 
-  //  The percent can be px. It just represents your minimum starting width.
-  //   */
     margin: 5px;
     height: 150px;
     color: white;
@@ -37,11 +34,3 @@ p {
     border-color: blue;
   }
  
-//   .my_class {
-//   @if this.status == true {
-//     color: blue;
-  
-//   } @else {
-//     color: red;
-//   }
-// }
\ No newline at end of file
diff --git a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
index 25d5595..74c2edd 100644
--- a/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
+++ b/src/app/components/admin-form-create-event/admin-form-create-event.component.ts
@@ -23,9 +23,7 @@ export class AdminFormCreateEventComponent implements OnInit {
   editingButton : boolean = false;
   disabled: boolean;
   event: any;
-  // currentCampaignImages: any = [];
-  // currentGalleryImages: any= [];
-
+ 
 
   constructor(private _formBuilder: FormBuilder, private _router: Router, private _campaigns: CampaignsService) { }
 
@@ -35,28 +33,13 @@ export class AdminFormCreateEventComponent implements OnInit {
 
 
     this.nameFormGroup = this._formBuilder.group({
-      eventName: ['', Validators.required]
-
+      campaignName: [null, [Validators.required]],
+      value: [null, [Validators.required, Validators.min(2), Validators.max(120)]],
+      value2: [null, [Validators.required, Validators.min(10), Validators.max(600)]]
     })
+    this.nameFormGroup.valueChanges.subscribe(_ => console.log(this.nameFormGroup.errors))
   }
 
-    // drop(event: CdkDragDrop<string[]>) {
-    //   if (event.previousContainer === event.container) {
-    //   moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-    // } else {
-    //   transferArrayItem(event.previousContainer.data,
-    //                     event.container.data,
-    //                     event.previousIndex,
-    //                     event.currentIndex);
-    // }
-    
-    
-  // }
-
-
-  
-  
- 
   displayOptions(arg){
     this.showEventDetails = !this.showEventDetails;
     this.manageButton =!this.manageButton;
@@ -65,10 +48,6 @@ export class AdminFormCreateEventComponent implements OnInit {
     this.nameFormGroup.patchValue({
       arg});
     console.log(this.event.campaignImages)
-    // this.currentCampaignImages = [...this.event.campaignImages]
-    // this.currentGalleryImages = [...this.event.galleryImages ]
-    
-
     }
   
 
@@ -106,7 +85,25 @@ export class AdminFormCreateEventComponent implements OnInit {
     moveItemInArray(this.campaignImages, event.previousIndex, event.currentIndex);
   }
 
-  
+
+  createCampaign(){
+    console.log(this.nameFormGroup.value.value)
+    console.log(this.nameFormGroup.value.value2)
+    console.log(this.nameFormGroup.value.campaignName)
+    
+  }
+
+  renameCampaign(){
+    console.log(this.nameFormGroup.value.campaignName)
   }
 
+  updateCampaign(){
+    console.log(this.nameFormGroup.value.value)
+    console.log(this.nameFormGroup.value.value2)
+    console.log(this.nameFormGroup.value.campaignName)
+    
+  }
+  
+}
+