diff --git a/angular.json b/angular.json index 9f1698b..145f9de 100644 --- 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": [] } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 91e0c64..d92668d 100644 --- 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 = [ diff --git a/src/app/app.component.css b/src/app/app.component.css deleted file mode 100644 index d1c3fe8..0000000 --- a/src/app/app.component.css +++ /dev/null @@ -1,10 +0,0 @@ -body{ - display: flex; - flex-direction: column; - height: 100vh; - margin: 0; -} - -main { - flex: 1; -} diff --git a/src/app/app.component.html b/src/app/app.component.html index d3d5c21..20ba0c2 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,7 @@ - - + +
+ +
@@ -12,4 +14,5 @@ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..a8f8a53 --- /dev/null +++ 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; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 28e67fa..3f94dc8 100644 --- 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(); + } } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1928cb6..7d007c6 100644 --- 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: [ diff --git a/src/app/documentation/documentation.component.html b/src/app/components/documentation/documentation.component.html similarity index 100% rename from src/app/documentation/documentation.component.html rename to src/app/components/documentation/documentation.component.html diff --git a/src/app/documentation/documentation.component.css b/src/app/components/documentation/documentation.component.scss similarity index 100% rename from src/app/documentation/documentation.component.css rename to src/app/components/documentation/documentation.component.scss diff --git a/src/app/documentation/documentation.component.spec.ts b/src/app/components/documentation/documentation.component.spec.ts similarity index 100% rename from src/app/documentation/documentation.component.spec.ts rename to src/app/components/documentation/documentation.component.spec.ts diff --git a/src/app/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts similarity index 79% rename from src/app/documentation/documentation.component.ts rename to src/app/components/documentation/documentation.component.ts index 36cd8a1..af87d03 100644 --- a/src/app/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 { diff --git a/src/app/editor/editor.component.html b/src/app/components/editor/editor.component.html similarity index 100% rename from src/app/editor/editor.component.html rename to src/app/components/editor/editor.component.html diff --git a/src/app/editor/editor.component.css b/src/app/components/editor/editor.component.scss similarity index 100% rename from src/app/editor/editor.component.css rename to src/app/components/editor/editor.component.scss diff --git a/src/app/editor/editor.component.spec.ts b/src/app/components/editor/editor.component.spec.ts similarity index 100% rename from src/app/editor/editor.component.spec.ts rename to src/app/components/editor/editor.component.spec.ts diff --git a/src/app/editor/editor.component.ts b/src/app/components/editor/editor.component.ts similarity index 74% rename from src/app/editor/editor.component.ts rename to src/app/components/editor/editor.component.ts index e7bef8f..c2f565c 100644 --- a/src/app/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 + ); } + } diff --git a/src/app/footer/footer.component.html b/src/app/components/footer/footer.component.html similarity index 100% rename from src/app/footer/footer.component.html rename to src/app/components/footer/footer.component.html diff --git a/src/app/footer/footer.component.css b/src/app/components/footer/footer.component.scss similarity index 100% rename from src/app/footer/footer.component.css rename to src/app/components/footer/footer.component.scss diff --git a/src/app/footer/footer.component.spec.ts b/src/app/components/footer/footer.component.spec.ts similarity index 100% rename from src/app/footer/footer.component.spec.ts rename to src/app/components/footer/footer.component.spec.ts diff --git a/src/app/footer/footer.component.ts b/src/app/components/footer/footer.component.ts similarity index 87% rename from src/app/footer/footer.component.ts rename to src/app/components/footer/footer.component.ts index d6ade9c..5eaf2fc 100644 --- a/src/app/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; diff --git a/src/app/form/form.component.html b/src/app/components/form/form.component.html similarity index 100% rename from src/app/form/form.component.html rename to src/app/components/form/form.component.html diff --git a/src/app/form/form.component.css b/src/app/components/form/form.component.scss similarity index 100% rename from src/app/form/form.component.css rename to src/app/components/form/form.component.scss diff --git a/src/app/form/form.component.spec.ts b/src/app/components/form/form.component.spec.ts similarity index 100% rename from src/app/form/form.component.spec.ts rename to src/app/components/form/form.component.spec.ts diff --git a/src/app/form/form.component.ts b/src/app/components/form/form.component.ts similarity index 96% rename from src/app/form/form.component.ts rename to src/app/components/form/form.component.ts index 795f2c0..f2bf5e9 100644 --- a/src/app/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; diff --git a/src/app/header/header.component.html b/src/app/components/header/header.component.html similarity index 100% rename from src/app/header/header.component.html rename to src/app/components/header/header.component.html diff --git a/src/app/header/header.component.css b/src/app/components/header/header.component.scss similarity index 61% rename from src/app/header/header.component.css rename to src/app/components/header/header.component.scss index 998928e..8a9be90 100644 --- a/src/app/header/header.component.css +++ 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 { diff --git a/src/app/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts similarity index 100% rename from src/app/header/header.component.spec.ts rename to src/app/components/header/header.component.spec.ts diff --git a/src/app/header/header.component.ts b/src/app/components/header/header.component.ts similarity index 89% rename from src/app/header/header.component.ts rename to src/app/components/header/header.component.ts index 23b0eeb..ddeb23c 100644 --- a/src/app/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; diff --git a/src/app/components/landing-page/landing-page.component.html b/src/app/components/landing-page/landing-page.component.html new file mode 100644 index 0000000..a5eb4ce --- /dev/null +++ b/src/app/components/landing-page/landing-page.component.html @@ -0,0 +1,11 @@ +
+
+

{{ 'LandingPage.Welcome' | translate}}

+ {{ 'LandingPage.Description' | translate}} +
+
+
+ {{ 'LandingPage.Try' | translate}} +
+
+
diff --git a/src/app/landing-page/landing-page.component.css b/src/app/components/landing-page/landing-page.component.scss similarity index 97% rename from src/app/landing-page/landing-page.component.css rename to src/app/components/landing-page/landing-page.component.scss index b246888..cd12a31 100644 --- a/src/app/landing-page/landing-page.component.css +++ 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 { diff --git a/src/app/landing-page/landing-page.component.spec.ts b/src/app/components/landing-page/landing-page.component.spec.ts similarity index 100% rename from src/app/landing-page/landing-page.component.spec.ts rename to src/app/components/landing-page/landing-page.component.spec.ts diff --git a/src/app/landing-page/landing-page.component.ts b/src/app/components/landing-page/landing-page.component.ts similarity index 90% rename from src/app/landing-page/landing-page.component.ts rename to src/app/components/landing-page/landing-page.component.ts index 3379e6e..4c7e29c 100644 --- a/src/app/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){} diff --git a/src/app/output/output.component.html b/src/app/components/output/output.component.html similarity index 100% rename from src/app/output/output.component.html rename to src/app/components/output/output.component.html diff --git a/src/app/output/output.component.css b/src/app/components/output/output.component.scss similarity index 100% rename from src/app/output/output.component.css rename to src/app/components/output/output.component.scss diff --git a/src/app/output/output.component.spec.ts b/src/app/components/output/output.component.spec.ts similarity index 100% rename from src/app/output/output.component.spec.ts rename to src/app/components/output/output.component.spec.ts diff --git a/src/app/output/output.component.ts b/src/app/components/output/output.component.ts similarity index 79% rename from src/app/output/output.component.ts rename to src/app/components/output/output.component.ts index f0d2b4b..8638d83 100644 --- a/src/app/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 { diff --git a/src/app/services/codeExecution.service.ts b/src/app/services/codeExecution.service.ts new file mode 100644 index 0000000..e9bd80a --- /dev/null +++ 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 { + return this.http.post(this.apiUrl, { code }); + } +} \ No newline at end of file diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts new file mode 100644 index 0000000..daf6118 --- /dev/null +++ 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(false); + isDarkTheme = this._darkTheme.asObservable(); + + toggleDarkTheme() { + this._darkTheme.next(!this._darkTheme.value); + console.log('Theme toggled'); + } +} \ No newline at end of file diff --git a/src/app/service/translation.service.ts b/src/app/services/translation.service.ts similarity index 100% rename from src/app/service/translation.service.ts rename to src/app/services/translation.service.ts diff --git a/src/favicon.ico b/src/favicon.ico deleted file mode 100644 index 997406a..0000000 Binary files a/src/favicon.ico and /dev/null differ diff --git a/src/styles.css b/src/styles.scss similarity index 100% rename from src/styles.css rename to src/styles.scss