Passage en SPA

sandkasten/src/app/app-routing.module.ts

@@ -1,7 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { EditorComponent } from './editor/editor.component';
+import { LandingPageComponent } from './landing-page/landing-page.component';
+import { OutputComponent } from './output/output.component';
 
-const routes: Routes = [];
+// Toutes les routes de l'application sont définies ici 
+const routes: Routes = [
+  { path: '', component: LandingPageComponent },
+  { path: 'editor', component: EditorComponent },
+  { path: 'output', component: OutputComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

sandkasten/src/app/app.component.css

@@ -1,14 +0,0 @@
-.code_container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-
-  color: white;
-}
-
-.code_container .code_input {
-  background: red;
-}
-
-.code_container .code_output {
-  background: blue;
-}

sandkasten/src/app/app.component.html

@@ -1,6 +1,5 @@
 <app-header></app-header>
 <div class="code_container">
-  <app-code-input class="code_input"></app-code-input>
+  <router-outlet></router-outlet>
-  <app-code-output class="code_output"></app-code-output>
 </div>
 <app-footer></app-footer>

sandkasten/src/app/app.module.ts

@@ -4,17 +4,19 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
-import { CodeInputComponent } from './code-input/code-input.component';
-import { CodeOutputComponent } from './code-output/code-output.component';
 import { FooterComponent } from './footer/footer.component';
+import { EditorComponent } from './editor/editor.component';
+import { OutputComponent } from './output/output.component';
+import { LandingPageComponent } from './landing-page/landing-page.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    CodeInputComponent,
+    FooterComponent,
-    CodeOutputComponent,
+    EditorComponent,
-    FooterComponent
+    OutputComponent,
+    LandingPageComponent
   ],
   imports: [
     BrowserModule,

sandkasten/src/app/code-input/code-input.component.css

@@ -1,5 +0,0 @@
-.code_input .code_input_textarea {
-  background-color: #cccccc;
-  min-height: 80vh;
-  width: 100%;
-}

sandkasten/src/app/code-input/code-input.component.html

@@ -1,10 +0,0 @@
-<div class="code_input">
-  <textarea
-    class="code_input_textarea"
-    id="code_input"
-    name="code_input"
-    placeholder="Enter your code here..."
-  ></textarea>
-  <button (click)="onRunButtonClicked()">Run</button>
-  <p>{{ reponse }}</p>
-</div>

sandkasten/src/app/code-input/code-input.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-code-input',
-  templateUrl: './code-input.component.html',
-  styleUrls: ['./code-input.component.css']
-})
-export class CodeInputComponent {
-  reponse!: string;
-  onRunButtonClicked() {
-    this.reponse = 'Run button clicked';
-    console.log('Run button clicked');
-  }
-}

sandkasten/src/app/code-output/code-output.component.html

@@ -1 +0,0 @@
-<p>code-output works!</p>

sandkasten/src/app/code-output/code-output.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CodeOutputComponent } from './code-output.component';
-
-describe('CodeOutputComponent', () => {
-  let component: CodeOutputComponent;
-  let fixture: ComponentFixture<CodeOutputComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [CodeOutputComponent]
-    });
-    fixture = TestBed.createComponent(CodeOutputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

sandkasten/src/app/code-output/code-output.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-code-output',
-  templateUrl: './code-output.component.html',
-  styleUrls: ['./code-output.component.css']
-})
-export class CodeOutputComponent {
-
-}

sandkasten/src/app/editor/editor.component.css

@@ -0,0 +1,5 @@
+.code_input .code_input_textarea {
+    background-color: #cccccc;
+    min-height: 80vh;
+    width: 100%;
+}

sandkasten/src/app/editor/editor.component.html

@@ -0,0 +1,13 @@
+<div class="code_input">
+  <textarea
+    class="code_input_textarea"
+    id="code_input"
+    name="code_input"
+    placeholder="Enter your code here..."
+  ></textarea>
+  <button (click)="onRunButtonClicked()" [disabled]="isLoaded">Run</button>
+  <div *ngIf="!isLoaded">
+    <p>Loading: {{ loadingProgress }}%</p>
+    <div class="loading-bar" [style.width.%]="loadingProgress"></div>
+  </div>
+</div>

sandkasten/src/app/editor/editor.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CodeInputComponent } from './code-input.component';
+import { EditorComponent } from './editor.component';
 
-describe('CodeInputComponent', () => {
+describe('EditorComponent', () => {
-  let component: CodeInputComponent;
+  let component: EditorComponent;
-  let fixture: ComponentFixture<CodeInputComponent>;
+  let fixture: ComponentFixture<EditorComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CodeInputComponent]
+      declarations: [EditorComponent]
     });
-    fixture = TestBed.createComponent(CodeInputComponent);
+    fixture = TestBed.createComponent(EditorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

sandkasten/src/app/editor/editor.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.css']
+})
+export class EditorComponent implements OnInit{
+  loadingProgress: number = 0; // Pour suivre la progression du chargement
+  isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
+
+  constructor(private router: Router){}
+
+  ngOnInit(): void {
+    
+  }
+
+  // Si click sur "Run", on redirige vers la page d'output
+  onRunButtonClicked() {
+    this.loadingProgress = 0;
+    this.isLoaded = false;
+
+    // Simuler le chargement pendant 5 secondes
+    const interval = setInterval(() => {
+      this.loadingProgress++;
+      if (this.loadingProgress >= 100) {
+        clearInterval(interval); // Arrêtez la simulation de chargement
+        this.isLoaded = true;
+        // Redirigez vers une autre page (par exemple, 'output')
+        this.router.navigate(['/output']);
+      }
+    }, 50); // Augmenter la valeur pour ralentir la progression du chargement si nécessaire
+  }
+}

sandkasten/src/app/header/header.component.css

@@ -1,7 +1,19 @@
-.header-card {
+img {
-    width: 35%;
+        width: 5%;
+    }
+
+
+a {
+    margin: 0 10px;
+    color: #333;
+    text-decoration: none;
 
-    img {
+    &:hover {
-        width: 10%;
+        text-decoration: underline;
     }
 }
+
+.active {
+    color: #666;
+    text-decoration: underline;
+}

sandkasten/src/app/header/header.component.html

@@ -3,4 +3,18 @@
   <p>{{ description }}</p>
   <p>Version : {{ version }}</p>
   <img [src]="imgSrc" alt="imgSrc" />
+  <nav>
+    <a
+      routerLink=""
+      routerLinkActive="active"
+      [routerLinkActiveOptions]="{ exact: true }"
+      >Accueil</a
+    >
+    <a
+      routerLink="editor"
+      routerLinkActive="active"
+      [routerLinkActiveOptions]="{ exact: true }"
+      >Éditeur</a
+    >
+  </nav>
 </div>

sandkasten/src/app/landing-page/landing-page.component.css

@@ -0,0 +1,15 @@
+.landing-block {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.landing-links {
+    width: 100%;
+    text-align: center;
+}
+
+button{
+    font-size: 20px;
+}

sandkasten/src/app/landing-page/landing-page.component.html

@@ -0,0 +1,6 @@
+<div class="landing-block">
+  <img src="../assets/img/logo.png" alt="logo" />
+  <div class="landing-links">
+    <button (click)="onContinue()">Continuer vers l'éditeur</button>
+  </div>
+</div>

sandkasten/src/app/landing-page/landing-page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingPageComponent } from './landing-page.component';
+
+describe('LandingPageComponent', () => {
+  let component: LandingPageComponent;
+  let fixture: ComponentFixture<LandingPageComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LandingPageComponent]
+    });
+    fixture = TestBed.createComponent(LandingPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

sandkasten/src/app/landing-page/landing-page.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-landing-page',
+  templateUrl: './landing-page.component.html',
+  styleUrls: ['./landing-page.component.css']
+})
+export class LandingPageComponent implements OnInit{
+  constructor(private router: Router){}
+  ngOnInit(): void {
+    
+  }
+  // Si click sur "Run", on redirige vers la page d'édition
+  onContinue():void{
+      this.router.navigateByUrl('/editor');
+  }
+}

sandkasten/src/app/output/output.component.html

@@ -0,0 +1 @@
+<p>output works!</p>

sandkasten/src/app/output/output.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OutputComponent } from './output.component';
+
+describe('OutputComponent', () => {
+  let component: OutputComponent;
+  let fixture: ComponentFixture<OutputComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [OutputComponent]
+    });
+    fixture = TestBed.createComponent(OutputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

sandkasten/src/app/output/output.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-output',
+  templateUrl: './output.component.html',
+  styleUrls: ['./output.component.css']
+})
+export class OutputComponent {
+
+}

sandkasten/src/styles.css

@@ -1,3 +1,20 @@
 * {
     font-family: Roboto, Helvetica, sans-serif;
 }
+
+button {
+    background-color: transparent;
+    box-sizing: border-box;
+    padding: 5px 10px;
+    border: none;
+    box-shadow: lightgray 3px 3px 7px;
+    margin-right: 20px;
+    outline: none;
+    font-size: 20px;
+    font-weight: 500;
+
+    &:active {
+        transform: translate(1px, 1px);
+        box-shadow: lightgray 0 0 5px;
+    }
+}