#91 Fix error if fromTemplate action called twice and remove unused css

Okty-io · Jun 18, 2018 · 44c004d · 44c004d
1 parent b8ae2a7
commit 44c004d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -79,6 +79,10 @@
   <p class="home-description" [ngClass]="{'home-description-transition': redirection}">
     The simplest application to create your docker projects.
   </p>
-  <a (click)="goToSearch()" [ngClass]="{'home-button-transition': redirection}" class="home-button">Start Here</a>
-  <a (click)="goToTemplate()" [ngClass]="{'home-button-transition': redirection}" class="home-button">Template</a>
+  <a (click)="goToSearch()"
+     [ngClass]="{'home-button-transition': redirection, 'hide': templateSelected}"
+     class="home-button">Empty project</a>
+  <a (click)="goToTemplate()"
+     [ngClass]="{'home-button-transition': redirection, 'hide': searchSelected}"
+     class="home-button">From template</a>
 </div>
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
@@ -61,7 +61,7 @@
         .docker-container-1 {
             width: 45px;
             position: absolute;
-            top: 0%;
+          top: 0;
             left: 50px;
             opacity: 0;
 
@@ -87,7 +87,7 @@
         .docker-container-2 {
             width: 45px;
             position: absolute;
-            top: 0%;
+          top: 0;
             right: 50px;
             opacity: 0;
 
@@ -113,7 +113,7 @@
         .docker-container-3 {
             width: 45px;
             position: absolute;
-            right: 0%;
+          right: 0;
             top: calc(50% - 30px);
             opacity: 0;
 
@@ -139,7 +139,7 @@
             width: 45px;
             position: absolute;
             right: 50px;
-            bottom: 0%;
+          bottom: 0;
             opacity: 0;
 
             animation: docker4 6s infinite;
@@ -165,7 +165,7 @@
             width: 45px;
             position: absolute;
             left: 50px;
-            bottom: 0%;
+          bottom: 0;
             opacity: 0;
 
             animation: docker5 6s infinite;
@@ -191,7 +191,7 @@
             width: 45px;
             position: absolute;
             top: calc(50% - 30px);
-            left: 0%;
+          left: 0;
             opacity: 0;
 
             animation: docker6 6s infinite;
@@ -298,6 +298,10 @@
     animation-fill-mode: forwards;
     animation-delay: 1.1s;
 
+    &:not(:first-child) {
+      margin-left: 12px;
+    }
+
     &:hover {
       cursor: pointer;
       background-color: rgba(255, 255, 255, 0.3);

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
@@ -13,6 +13,9 @@ export class HomeComponent implements OnInit, OnDestroy {
   redirection = false;
   sidebarVisible = false;
 
+  searchSelected = false;
+  templateSelected = false;
+
   constructor(
     private router: Router,
     private elRef: ElementRef,
@@ -39,13 +42,15 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   goToSearch() {
     this.redirection = true;
+    this.searchSelected = true;
     setTimeout(() => {
       this.router.navigate(['/search']);
     }, 1100);
   }
 
   goToTemplate(): void {
     this.redirection = true;
+    this.templateSelected = true;
     setTimeout(() => {
       this.router.navigate(['/template']);
     }, 1100);

diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts
@@ -19,13 +19,21 @@ export class TemplateComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    if (this.projectService.getContainers().length > 0 && this.projectService.isFromTemplate()) {
+      this.projectService.reset();
+
+      this.router.navigate(['/template']);
+      return;
+    }
+
     this.template.containers.forEach(async (element: Container) => {
       const container = await this.containerService.getContainerConfig(element.configPath);
       container.output = element.output;
 
       this.projectService.addContainer(element.containerId, container);
     });
 
+    this.projectService.setFromTemplate(true);
     this.router.navigate(['/review']);
   }
 }
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
@@ -6,10 +6,15 @@ import { SidebarService } from './sidebar.service';
 @Injectable()
 export class ProjectService {
 
-  private containersSubject: Subject<Array<Container>> = new Subject<Array<Container>>();
-  private containers: Container[] = [];
+  private containersSubject: Subject<Array<Container>>;
+
+  private fromTemplate: boolean;
+  private containers: Container[];
 
   constructor(private sidebarService: SidebarService) {
+    this.containersSubject = new Subject<Array<Container>>();
+    this.containers = [];
+    this.fromTemplate = false;
   }
 
   addContainer(id: string, container: Container): boolean {
@@ -91,4 +96,18 @@ export class ProjectService {
       return element.containerId === container.containerId;
     });
   }
+
+  setFromTemplate(isFromTemplate: boolean) {
+    this.fromTemplate = isFromTemplate;
+  }
+
+  isFromTemplate(): boolean {
+    return this.fromTemplate;
+  }
+
+  reset() {
+    this.containers = [];
+    this.sidebarService.hide();
+    this.containersSubject.next(this.containers);
+  }
 }