requete au post au serveur Node + mode sombre/clair

1 year ago · a3a0135cdc
parent 5c986142c5
commit a3a0135cdc
40 changed files with 161 additions and 62 deletions
--- a/angular.json
+++ b/angular.json
@ -25,7 +25,7 @@
              "src/assets"
            ],
            "styles": [
-              "src/styles.css"
+              "src/styles.scss"
            ],
            "scripts": []
          },
@ -84,7 +84,7 @@
              "src/assets"
            ],
            "styles": [
-              "src/styles.css"
+              "src/styles.scss"
            ],
            "scripts": []
          }
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -1,10 +1,10 @@
 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';
-import {DocumentationComponent} from "./documentation/documentation.component";
-import {FormComponent} from "./form/form.component";
+import { EditorComponent } from './components/editor/editor.component';
+import { LandingPageComponent } from './components/landing-page/landing-page.component';
+import { OutputComponent } from './components/output/output.component';
+import {DocumentationComponent} from "./components/documentation/documentation.component";
+import {FormComponent} from "./components/form/form.component";

 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@ -1,10 +0,0 @@
-body{
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  margin: 0;
-}
-
-main {
-  flex: 1;
-}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,5 +1,7 @@
-<body>
-
+<body [ngClass]="themeClass">
+    <div [ngClass]="themeClass">
+    <button (click)="toggleTheme()">Toggle Theme</button>
+  
  <header>
    <app-header></app-header>
  </header>
@ -12,4 +14,5 @@
    <app-footer></app-footer>
  </footer>

+</div>
 </body>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -0,0 +1,15 @@
+body.light-theme {
+  background-color: #ffffff;
+  color: #000000;
+  /* Autres styles pour le thème clair */
+}
+
+body.dark-theme {
+  background-color: #333333;
+  color: #ffffff;
+  /* Autres styles pour le thème sombre */
+}
+
+main {
+  flex: 1;
+}
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-
+import { Component, OnInit } from '@angular/core';
+import { ThemeService } from './services/theme.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+
+export class AppComponent implements OnInit {
+  themeClass = 'light-theme';
+
+  constructor(private themeService: ThemeService) {}
+
+  ngOnInit() {
+    this.themeService.isDarkTheme.subscribe((isDark) => {
+      this.themeClass = isDark ? 'dark-theme' : 'light-theme';
+      console.log('Theme class updated:', this.themeClass);
+    });
+  }
+
+  toggleTheme() {
+    this.themeService.toggleDarkTheme();
+  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -3,13 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { HeaderComponent } from './header/header.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';
-import { DocumentationComponent } from './documentation/documentation.component';
-import { FormComponent } from './form/form.component';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { EditorComponent } from './components/editor/editor.component';
+import { OutputComponent } from './components/output/output.component';
+import { LandingPageComponent } from './components/landing-page/landing-page.component';
+import { DocumentationComponent } from './components/documentation/documentation.component';
+import { FormComponent } from './components/form/form.component';
 import { ReactiveFormsModule } from '@angular/forms';

 import { FormsModule } from '@angular/forms';
@ -18,7 +18,8 @@ import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { TranslationService } from './service/translation.service';
+
+import { TranslationService } from './services/translation.service';

@NgModule({
  declarations: [
--- a/src/app/components/documentation/documentation.component.html
+++ b/src/app/components/documentation/documentation.component.html
--- a/src/app/components/documentation/documentation.component.scss
+++ b/src/app/components/documentation/documentation.component.scss
--- a/src/app/components/documentation/documentation.component.spec.ts
+++ b/src/app/components/documentation/documentation.component.spec.ts
--- a/src/app/components/documentation/documentation.component.ts
+++ b/src/app/components/documentation/documentation.component.ts
@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
  selector: 'app-documentation',
  templateUrl: './documentation.component.html',
-  styleUrls: ['./documentation.component.css']
+  styleUrls: ['./documentation.component.scss']
 })
 export class DocumentationComponent {

--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
--- a/src/app/components/editor/editor.component.scss
+++ b/src/app/components/editor/editor.component.scss
--- a/src/app/components/editor/editor.component.spec.ts
+++ b/src/app/components/editor/editor.component.spec.ts
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { CodeExecutionService } from 'src/app/services/codeExecution.service';

 // Exemple de code pour chaque langage
 const defaults = {
@ -16,7 +17,7 @@ const defaults = {
@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
-  styleUrls: ['./editor.component.css']
+  styleUrls: ['./editor.component.scss']
 })
 export class EditorComponent implements OnInit{
  loadingProgress: number = 0; // Pour suivre la progression du chargement
@ -30,7 +31,7 @@ export class EditorComponent implements OnInit{
  };
  defaults = defaults;

-  constructor(private router: Router){}
+  constructor(private router: Router, private codeExecutionService: CodeExecutionService) {}

  ngOnInit(): void {
    
@ -53,22 +54,21 @@ export class EditorComponent implements OnInit{
  clear(): void {
    this.defaults[this.mode] = '';
  }
-
-  // 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;
+    const codeToExecute = this.defaults[this.mode];
+  
+    this.codeExecutionService.executeCode(codeToExecute).subscribe(
+      (response) => {
+        console.log('Réponse du serveur:', response);
        // Redirigez vers une autre page (par exemple, 'output')
        this.router.navigate(['/output']);
+      },
+      (error) => {
+        console.error('Erreur lors de l\'exécution du code:', error);
      }
-    }, 50); // Augmenter la valeur pour ralentir la progression du chargement si nécessaire
+    );
  }
+  

 }
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
--- a/src/app/components/footer/footer.component.spec.ts
+++ b/src/app/components/footer/footer.component.spec.ts
--- a/src/app/components/footer/footer.component.ts
+++ b/src/app/components/footer/footer.component.ts
@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.css']
+  styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
  sandkasten_logo!: string;
--- a/src/app/components/form/form.component.html
+++ b/src/app/components/form/form.component.html
--- a/src/app/components/form/form.component.scss
+++ b/src/app/components/form/form.component.scss
--- a/src/app/components/form/form.component.spec.ts
+++ b/src/app/components/form/form.component.spec.ts
--- a/src/app/components/form/form.component.ts
+++ b/src/app/components/form/form.component.ts
@ -6,7 +6,7 @@ import emailjs from '@emailjs/browser';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
-  styleUrls: ['./form.component.css']
+  styleUrls: ['./form.component.scss']
 })
 export class FormComponent {
  form: FormGroup;
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@ -1,5 +1,11 @@
 .toolbar {
-  background-color: #494b92;
+  &.dark-theme {
+    background-color: black !important;
+  }
+
+  &.light-theme {
+    background-color: white !important;
+  }
  padding:  0 1rem;
  display: flex;
  flex-direction: row;
@ -29,18 +35,36 @@
 }

 .left_part .menu a {
-  color: white;
+  &.dark-theme {
+    color: black !important;
+  }
+
+  &.light-theme {
+    color: white !important;
+  }
  text-decoration: none;
  padding: .5rem .5rem 0;
 }

 .left_part .menu a:hover {
-  background-color: #686AB7;
+  &.dark-theme {
+    background-color: black !important;
+  }
+
+  &.light-theme {
+    background-color: white !important;
+  }
  transition: background-color .3s ease;
 }

 .left_part .menu a.active {
-  background-color: #686AB7;
+  &.dark-theme {
+    background-color: black !important;
+  }
+
+  &.light-theme {
+    background-color: white !important;
+  }
 }

 .sandkasten-logo {
@ -52,7 +76,13 @@
 .logo_title {
  font-size: 1.5rem;
  font-weight: 500;
-  color: white;
+  &.dark-theme {
+    color: black !important;
+  }
+
+  &.light-theme {
+    color: white !important;
+  }
 }

 .right_part {
@ -60,7 +90,13 @@
  flex-direction: row;
  align-items: center;
  gap: 2rem;
-  color: white;
+  &.dark-theme {
+    color: black !important;
+  }
+
+  &.light-theme {
+    color: white !important;
+  }
 }

 .gitea_logo_container .gitea-logo {
--- a/src/app/components/header/header.component.spec.ts
+++ b/src/app/components/header/header.component.spec.ts
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {Router} from "@angular/router";
-import { TranslationService } from '../service/translation.service';
+import { TranslationService } from '../../services/translation.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+  styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit {
  title!: string;
--- a/src/app/components/landing-page/landing-page.component.html
+++ b/src/app/components/landing-page/landing-page.component.html
@ -0,0 +1,11 @@
+<div class="landing-block">
+  <div class="hero-container">
+    <h2 class="hero-title">{{ 'LandingPage.Welcome' | translate}}</h2>
+    <span class="hero-text">{{ 'LandingPage.Description' | translate}}</span>
+  </div>
+  <div class="landing-links">
+    <div class="button-container">
+      <a class="animated-button" (click)="onContinue()">{{ 'LandingPage.Try' | translate}}</a>
+    </div>
+  </div>
+</div>
--- a/src/app/components/landing-page/landing-page.component.scss
+++ b/src/app/components/landing-page/landing-page.component.scss
@ -1,6 +1,5 @@
 .landing-block {
    padding: 6rem;
-
    display: flex;
    flex-direction: row;
    gap: 2rem;
@ -11,9 +10,8 @@
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
-
    padding: 2rem 1rem;
-    background: #EEEEEE;
+    background: #686AB7;
 }

 .landing-links {
--- a/src/app/components/landing-page/landing-page.component.spec.ts
+++ b/src/app/components/landing-page/landing-page.component.spec.ts
--- a/src/app/components/landing-page/landing-page.component.ts
+++ b/src/app/components/landing-page/landing-page.component.ts
@ -4,7 +4,7 @@ import { Router } from '@angular/router';
@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
-  styleUrls: ['./landing-page.component.css']
+  styleUrls: ['./landing-page.component.scss']
 })
 export class LandingPageComponent implements OnInit{
  constructor(private router: Router){}
--- a/src/app/components/output/output.component.html
+++ b/src/app/components/output/output.component.html
--- a/src/app/components/output/output.component.scss
+++ b/src/app/components/output/output.component.scss
--- a/src/app/components/output/output.component.spec.ts
+++ b/src/app/components/output/output.component.spec.ts
--- a/src/app/components/output/output.component.ts
+++ b/src/app/components/output/output.component.ts
@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
  selector: 'app-output',
  templateUrl: './output.component.html',
-  styleUrls: ['./output.component.css']
+  styleUrls: ['./output.component.scss']
 })
 export class OutputComponent {

--- a/src/app/services/codeExecution.service.ts
+++ b/src/app/services/codeExecution.service.ts
@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CodeExecutionService {
+  private apiUrl = 'http://localhost:3000'; // Url du serveur Node.js en local
+
+  constructor(private http: HttpClient) {}
+
+  executeCode(code: string): Observable<any> {
+    return this.http.post<any>(this.apiUrl, { code });
+  }
+}
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private _darkTheme = new BehaviorSubject<boolean>(false);
+  isDarkTheme = this._darkTheme.asObservable();
+
+  toggleDarkTheme() {
+    this._darkTheme.next(!this._darkTheme.value);
+    console.log('Theme toggled');
+  }
+}
--- a/src/app/services/translation.service.ts
+++ b/src/app/services/translation.service.ts
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/styles.scss
+++ b/src/styles.scss