Page messages PT1

src/app/app.component.ts

@@ -5,7 +5,7 @@ import {LoginFormComponent} from "./login-form/login-form.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, LoginFormComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.routes.ts

@@ -10,20 +10,20 @@ export const routes: Routes = [
         path: 'main',
         loadComponent: () => import('./pages/main/main.component').then(x => x.Main),
         children: [
-            {
+            /*{
                 path:'groupmessages',
                 loadComponent: () => import('./pages/groupmessages/groupmessages.component').then(x => x.Groupmessages)
-            },
+            },*/
 
             {
                 path:'messages',
-                loadComponent: () => import('./pages/messages/messages.component').then(x => x.Messages)
+                loadComponent: () => import('./pages/messages/messages-menu/messages-menu.component').then(x => x.MessagesMenu)
             },
 
-            {
+            /*{
                 path:'parameters',
                 loadComponent: () => import('./pages/parameters/parameters.component').then(x => x.Parameters)
-            }
+            }*/
         ]
     }
 ];

src/app/pages/groupmessages/groupmessages.component.html

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

src/app/pages/groupmessages/groupmessages.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { GroupmessagesComponent } from './groupmessages.component';
-
-describe('GroupmessagesComponent', () => {
-  let component: GroupmessagesComponent;
-  let fixture: ComponentFixture<GroupmessagesComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ GroupmessagesComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(GroupmessagesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/groupmessages/groupmessages.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-groupmessages',
-  templateUrl: './groupmessages.component.html',
-  styleUrls: ['./groupmessages.component.scss'],
-})
-export class Groupmessages implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

src/app/pages/main/main.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { MainComponent } from './main.component';
-
-describe('MainComponent', () => {
-  let component: MainComponent;
-  let fixture: ComponentFixture<MainComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MainComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MainComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/main/main.component.ts

@@ -7,7 +7,7 @@ import {RouterOutlet} from "@angular/router";
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.scss'],
 })
-export class Main  implements OnInit {
+export class Main implements OnInit {
 
   constructor() { }
 

src/app/pages/messages/messages-infouser/messages-infouser.component.html

@@ -0,0 +1,5 @@
+<button>
+    <img width="50" height="50" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user-male-circle--v1"/>
+</button>
+<p>Nom User</p>
+

src/app/pages/messages/messages-infouser/messages-infouser.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-messages-infouser',
+  imports: [],
+  templateUrl: './messages-infouser.component.html',
+  styleUrl: './messages-infouser.component.css'
+})
+export class MessagesInfoUser {
+
+}

src/app/pages/messages/messages-main/messages-main.component.html

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

src/app/pages/messages/messages-main/messages-main.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import {MessagesMenu} from "../messages-menu/messages-menu.component";
+import {MessagesInfoUser} from "../messages-infouser/messages-infouser.component";
+import {MessagesSendComponent} from "../messages-send/messages-send.component";
+
+@Component({
+  selector: 'app-messages-main',
+  imports: [
+    MessagesMenu,
+    MessagesInfoUser,
+    MessagesSendComponent
+  ],
+  template: `
+  <app-messages-menu/>
+  <app-messages-infouser/>
+  <p>Message</p>
+  <app-messages-send/>
+  <
+  `,
+  styleUrl: './messages-main.component.css'
+})
+export class MessagesMain {
+
+}

src/app/pages/messages/messages-menu/messages-menu.component.html

@@ -0,0 +1,8 @@
+<button>
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
+        <g fill-opacity="0.8" fill="#bd5a5a" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-size="none" style="mix-blend-mode: normal">
+            <g transform="scale(3.55556,3.55556)">
+            <path d="M56,48c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0zM56,32c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0zM56,16c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0z"></path></g></g>
+    </svg>
+</button>
+

src/app/pages/messages/messages-menu/messages-menu.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-messages-menu',
+  imports: [],
+  templateUrl: './messages-menu.component.html',
+  styleUrl: './messages-menu.component.css'
+})
+export class MessagesMenu {
+
+}

src/app/pages/messages/messages-send/messages-send.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'app-messages-send',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  template: `
+    <ng-form>
+    <input type="text" [formControl]="sendMessage" />
+
+  </ng-form>`,
+  styleUrl: './messages-send.component.css'
+})
+export class MessagesSendComponent {
+  sendMessage = new FormControl();
+}

src/app/pages/messages/messages.component.html

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

src/app/pages/messages/messages.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { MessagesComponent } from './messages.component';
-
-describe('MessagesComponent', () => {
-  let component: MessagesComponent;
-  let fixture: ComponentFixture<MessagesComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MessagesComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MessagesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/messages/messages.component.ts

@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-messages',
-  template: `
-    <div class="menu">
-      <img src="../../../../public/logo-menu.png" alt="menu" role="button" style="width: 120px; height: 120px">
-    </div>
-    <img src="../../../../public/logo-menu.png" alt="menu" role="button" style="width: 120px; height: 120px">
-  
-  
-  
-  `,
-  styleUrls: ['./messages.component.scss'],
-})
-export class Messages implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

src/app/pages/parameters/parameters.component.html

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

src/app/pages/parameters/parameters.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ParametersComponent } from './parameters.component';
-
-describe('ParametersComponent', () => {
-  let component: ParametersComponent;
-  let fixture: ComponentFixture<ParametersComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ParametersComponent ],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ParametersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/parameters/parameters.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-parameters',
-  templateUrl: './parameters.component.html',
-  styleUrls: ['./parameters.component.scss'],
-})
-export class Parameters  implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}