requete au post au serveur Node + mode sombre/clair

2 years 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 { EditorComponent } from './components/editor/editor.component';
-import { LandingPageComponent } from './landing-page/landing-page.component';
+import { LandingPageComponent } from './components/landing-page/landing-page.component';
-import { OutputComponent } from './output/output.component';
+import { OutputComponent } from './components/output/output.component';
-import {DocumentationComponent} from "./documentation/documentation.component";
+import {DocumentationComponent} from "./components/documentation/documentation.component";
-import {FormComponent} from "./form/form.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,4 +1,6 @@
-<body>
+<body [ngClass]="themeClass">
    <div [ngClass]="themeClass">
    <button (click)="toggleTheme()">Toggle Theme</button>
  <header>
    <app-header></app-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 { Component, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/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 { HeaderComponent } from './components/header/header.component';
-import { FooterComponent } from './footer/footer.component';
+import { FooterComponent } from './components/footer/footer.component';
-import { EditorComponent } from './editor/editor.component';
+import { EditorComponent } from './components/editor/editor.component';
-import { OutputComponent } from './output/output.component';
+import { OutputComponent } from './components/output/output.component';
-import { LandingPageComponent } from './landing-page/landing-page.component';
+import { LandingPageComponent } from './components/landing-page/landing-page.component';
-import { DocumentationComponent } from './documentation/documentation.component';
+import { DocumentationComponent } from './components/documentation/documentation.component';
-import { FormComponent } from './form/form.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 {
@ -54,21 +55,20 @@ export class EditorComponent implements OnInit{
    this.defaults[this.mode] = '';
  }
  // Si click sur "Run", on redirige vers la page d'output
  onRunButtonClicked() {
-    this.loadingProgress = 0;
+    const codeToExecute = this.defaults[this.mode];
    this.isLoaded = false;
-    // Simuler le chargement pendant 5 secondes
+    this.codeExecutionService.executeCode(codeToExecute).subscribe(
-    const interval = setInterval(() => {
+      (response) => {
-      this.loadingProgress++;
+        console.log('Réponse du serveur:', response);
      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']);
      },
      (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