From 956580c52d655f0d9b123cf04ccd0b9c4b0c5e03 Mon Sep 17 00:00:00 2001
From: Romain Lebbadi-Breteau <romain@lebbadi.fr>
Date: Wed, 19 Apr 2023 14:40:04 -0400
Subject: [PATCH] Better app component
---
client/angular.json | 1 +
client/src/app/app.component.html | 20 ---------------
client/src/app/app.module.ts | 6 +++--
client/src/app/modules/app-routing.module.ts | 8 ++++--
.../src/app/{ => pages/app}/app.component.css | 9 ++++---
client/src/app/pages/app/app.component.html | 25 +++++++++++++++++++
.../app/{ => pages/app}/app.component.spec.ts | 0
.../src/app/{ => pages/app}/app.component.ts | 0
.../create-reservation.component.css | 4 +++
.../create-reservation.component.html | 1 +
.../create-reservation.component.ts | 10 ++++++++
client/tsconfig.json | 2 +-
12 files changed, 57 insertions(+), 29 deletions(-)
delete mode 100644 client/src/app/app.component.html
rename client/src/app/{ => pages/app}/app.component.css (83%)
create mode 100644 client/src/app/pages/app/app.component.html
rename client/src/app/{ => pages/app}/app.component.spec.ts (100%)
rename client/src/app/{ => pages/app}/app.component.ts (100%)
create mode 100644 client/src/app/pages/create-reservation/create-reservation.component.css
create mode 100644 client/src/app/pages/create-reservation/create-reservation.component.html
create mode 100644 client/src/app/pages/create-reservation/create-reservation.component.ts
diff --git a/client/angular.json b/client/angular.json
index e9990ba..7af7006 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -111,6 +111,7 @@
}
},
"defaultProject": "client",
+ "defaultConfiguration": "development",
"cli": {
"analytics": false
}
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
deleted file mode 100644
index ae90b5c..0000000
--- a/client/src/app/app.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div>
- <nav class="navbar navbar-dark bg-dark main-nav">
- <a class="navbar-brand title" href="/" matTooltip="Retournez à l'accueil">INF3710 - TP4</a>
- <div class="navbar-expand mr-auto">
- <div class="navbar-nav">
- <a class="nav-item nav-link active" routerLink="/ROUTEUR_À_IMPLÉMENTER">LIEN 1</a>
- <a class="nav-item nav-link active" routerLink="/ROUTEUR_À_IMPLÉMENTER">LIEN 2</a>
- <a class="nav-item nav-link active" routerLink="/ROUTEUR_À_IMPLÉMENTER">LIEN 3</a>
- </div>
- </div>
- </nav>
-
- <div class="home" *ngIf="route == ''">
- <p>
- Titre
- </p>
- <button mat-raised-button color="primary" class="btn" routerLink="/ROUTEUR_À_IMPLÉMENTER">Parcourir quelque chose...<mat-icon>arrow_right</mat-icon></button>
- </div>
- <router-outlet></router-outlet>
-</div>
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index f51f27c..ca07f45 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -4,14 +4,16 @@ import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./modules/app-routing.module";
-import { AppComponent } from "./app.component";
import { CommunicationService } from "./services/communication.service";
import { AppMaterialModule } from './modules/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CreateReservationComponent } from './pages/create-reservation/create-reservation.component';
+import { AppComponent } from "./pages/app/app.component";
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ CreateReservationComponent
],
imports: [
CommonModule,
diff --git a/client/src/app/modules/app-routing.module.ts b/client/src/app/modules/app-routing.module.ts
index 7e7f26f..fd3ec56 100644
--- a/client/src/app/modules/app-routing.module.ts
+++ b/client/src/app/modules/app-routing.module.ts
@@ -1,9 +1,13 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
-import { AppComponent } from "../app.component";
+import { AppComponent } from "@app/pages/app/app.component";
+import { CreateReservationComponent } from "@app/pages/create-reservation/create-reservation.component";
-const routes: Routes = [{ path: "app", component: AppComponent }];
+const routes: Routes = [
+ { path: "app", component: AppComponent },
+ { path: "create-reservation", component: CreateReservationComponent },
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],
diff --git a/client/src/app/app.component.css b/client/src/app/pages/app/app.component.css
similarity index 83%
rename from client/src/app/app.component.css
rename to client/src/app/pages/app/app.component.css
index bbb9f7e..ad71963 100644
--- a/client/src/app/app.component.css
+++ b/client/src/app/pages/app/app.component.css
@@ -5,19 +5,20 @@
font-weight: bold;
}
+.container-fluid {
+ height: 100%;
+}
+
.home {
+ height: fit-content;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content:center;
width: 80%;
- margin-left: 10.5%;
font-family: 'Roboto', sans-serif;
line-height: normal;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
font-size: 60px;
text-align: center;
background: rgba(154, 117, 240, 0.4);
diff --git a/client/src/app/pages/app/app.component.html b/client/src/app/pages/app/app.component.html
new file mode 100644
index 0000000..de79b65
--- /dev/null
+++ b/client/src/app/pages/app/app.component.html
@@ -0,0 +1,25 @@
+<div class="container-fluid g-0 d-flex flex-column">
+ <nav class="navbar navbar-dark bg-dark main-nav flex-shrink-1">
+ <a class="navbar-brand title" href="/" matTooltip="Retournez à l'accueil">INF3710 - TP4</a>
+ <div class="navbar-expand mr-auto">
+ <div class="navbar-nav">
+ <a class="nav-item nav-link active" routerLink="/">Accueil</a>
+ <a class="nav-item nav-link active" routerLink="/create-reservation">Créer réservation</a>
+ <a class="nav-item nav-link active" routerLink="/ROUTEUR_À_IMPLÉMENTER">LIEN 3</a>
+ </div>
+ </div>
+ </nav>
+
+ <div class="flex-grow-1 d-flex">
+ <div class="d-flex flex-row container justify-content-center align-items-center">
+ <div class="home" *ngIf="route == ''">
+ <p>
+ Titre
+ </p>
+ <button mat-raised-button color="primary" class="btn" routerLink="/ROUTEUR_À_IMPLÉMENTER">Parcourir quelque
+ chose...<mat-icon>arrow_right</mat-icon></button>
+ </div>
+ </div>
+ <router-outlet></router-outlet>
+ </div>
+</div>
diff --git a/client/src/app/app.component.spec.ts b/client/src/app/pages/app/app.component.spec.ts
similarity index 100%
rename from client/src/app/app.component.spec.ts
rename to client/src/app/pages/app/app.component.spec.ts
diff --git a/client/src/app/app.component.ts b/client/src/app/pages/app/app.component.ts
similarity index 100%
rename from client/src/app/app.component.ts
rename to client/src/app/pages/app/app.component.ts
diff --git a/client/src/app/pages/create-reservation/create-reservation.component.css b/client/src/app/pages/create-reservation/create-reservation.component.css
new file mode 100644
index 0000000..cbe226c
--- /dev/null
+++ b/client/src/app/pages/create-reservation/create-reservation.component.css
@@ -0,0 +1,4 @@
+.container {
+ width: 100%;
+ height: 100%;
+}
diff --git a/client/src/app/pages/create-reservation/create-reservation.component.html b/client/src/app/pages/create-reservation/create-reservation.component.html
new file mode 100644
index 0000000..584204e
--- /dev/null
+++ b/client/src/app/pages/create-reservation/create-reservation.component.html
@@ -0,0 +1 @@
+<div class="container"></div>
diff --git a/client/src/app/pages/create-reservation/create-reservation.component.ts b/client/src/app/pages/create-reservation/create-reservation.component.ts
new file mode 100644
index 0000000..a04d189
--- /dev/null
+++ b/client/src/app/pages/create-reservation/create-reservation.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-create-reservation',
+ templateUrl: './create-reservation.component.html',
+ styleUrls: ['./create-reservation.component.css']
+})
+export class CreateReservationComponent {
+
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 02a75f4..79709ce 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -26,7 +26,7 @@
],
"paths": {
"@common/*": ["../common/*"],
- "@src/*": ["./src/*"]
+ "@app/*": ["./src/app/*"]
},
},
"angularCompilerOptions": {
--
GitLab