CP Adding a dashboard page

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { ProfileComponent } from './control-panel/profile/profile/profile.compon
 import { EditProfileComponent } from './control-panel/profile/edit-profile/edit-profile.component';
 import { EditConfigurationComponent } from './control-panel/profile/configuration/edit-configuration/edit-configuration.component';
 import { DevicesComponent } from './control-panel/profile/devices/devices.component';
+import { DashboardComponent } from './control-panel/profile/dashboard/dashboard.component';
 
 const routes: Routes =
 [
@@ -20,6 +21,7 @@ const routes: Routes =
         { path: '', component: ProfileComponent},
         { path: ':profileId', children: [
             { path: '', component: ProfileComponent},
+            { path: 'dashboard', component: DashboardComponent},
             { path: 'edit', component: EditProfileComponent},
             { path: 'configurations', children: [
               { path: '', component: ConfigurationComponent},

src/app/app.component.html

@@ -9,6 +9,7 @@
         <button *ngIf="!Connected" pButton type="button" [label]="LabelHeaderAbout"></button>
         <button *ngIf="!Connected" pButton type="button" [label]="LabelHeaderTeam" ></button>
         <button *ngIf="!Connected" pButton type="button" [label]="LabelHeaderContact" ></button>
+        <button *ngIf="Connected" pButton type="button" label="MY DASHBOARD" (click)="GoToDashboard()"></button>
         <button *ngIf="Connected" pButton type="button" label="MY DEVICES" (click)="GoToDevices()"></button>
         <button *ngIf="Connected" pButton type="button" label="MY CONFIGURATIONS" (click)="GoToConfiguration()"></button>
         <button *ngIf="!Connected" pButton type="button" label="{{LabelHeaderSignIn}}" icon="pi pi-pencil" iconPos="right" (click)="SignUp()"></button>

src/app/app.component.ts

@@ -162,6 +162,10 @@ export class AppComponent implements OnInit {
     this._router.navigate(['/home']);
   }
 
+  public GoToDashboard() {
+    this._router.navigate(['/profile/' + this.ConnectedUser.id + '/dashboard']);
+  }
+
   public GoToProfile() {
     this._router.navigate(['/profile/' + this.ConnectedUser.id]);
   }

src/app/app.module.ts

@@ -38,6 +38,7 @@ import { ToastModule } from 'primeng/toast';
 import { DropdownModule } from 'primeng/dropdown';
 import { EditConfigurationComponent } from './control-panel/profile/configuration/edit-configuration/edit-configuration.component';
 import { DevicesComponent } from './control-panel/profile/devices/devices.component';
+import { DashboardComponent } from './control-panel/profile/dashboard/dashboard.component';
 
 
 
@@ -71,7 +72,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     ProfileComponent,
     EditProfileComponent,
     EditConfigurationComponent,
-    DevicesComponent
+    DevicesComponent,
+    DashboardComponent
   ],
   imports: [
     BrowserModule,

src/app/control-panel/home/home.component.html

@@ -86,26 +86,13 @@
 
 <div class="container">
   <div class="row justify-content-around">
-    <div class="col-3 ">
+    <div class="col-6">
-      <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
-        <div class="card-body">
-          <h5 class="card-title">HUBERT</h5>
-          <img class="card-img" src="../../assets/images/home-page/Hubert.jpg" style="margin-bottom: 2em">
-          <h6 class="card-subtitle mb-2 text-muted">Cette petite bite</h6>
-          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <ul class="social-network social-circle" style="text-align : center">
-            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
-            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
-            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class="col-3">
       <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
         <div class="card-body">
           <h5 class="card-title">FRANSOLET</h5>
-          <img class="card-img" src="../../assets/images/home-page/Thomas.jpg" style="margin-bottom: 2em">
+          <div style="justify-content: center;">
+            <img class="card-img" src="../../assets/images/home-page/Thomas.jpg" style="width: 50%; margin-bottom: 2em">
+          </div>
           <h6 class="card-subtitle mb-2 text-muted">Cette gribouille</h6>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
           <ul class="social-network social-circle">
@@ -116,11 +103,11 @@
         </div>
       </div>
     </div>
-    <div class="col-3" > 
+    <div class="col-6" > 
       <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
         <div class="card-body">
           <h5 class="card-title">MICHEL</h5>
-          <img class="card-img" src="../../assets/images/home-page/Michel2.jpg" style="margin-bottom: 2em">
+          <img class="card-img" src="../../assets/images/home-page/Michel2.jpg" style="width: 50%;margin-bottom: 2em">
           <h6 class="card-subtitle mb-2 text-muted">Ce poseur</h6>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
           <ul class="social-network social-circle">

src/app/control-panel/profile/dashboard/dashboard.component.css

@@ -0,0 +1,21 @@
+.sidebar {
+    position: fixed;
+    width: 200px;
+    height: 400px;
+    background: #000;
+}
+.content {
+    margin-left: 200px;
+    height: 500px;
+    width: auto;
+    position: relative;
+    background: #f00;
+    overflow: auto;
+    z-index: 1;
+}
+.info {
+    width: 1440px;
+    height: 300px;
+    position: relative;
+    background: #f55;
+}

src/app/control-panel/profile/dashboard/dashboard.component.html

@@ -0,0 +1,9 @@
+<!-- THIS NEED TO BE UPDATED PROPERLY -->
+<div class="blankSpace">
+    <br>
+    <br>
+</div>
+<div class="sidebar"></div>
+<div class="content">
+    <div class="info"></div>
+</div>

src/app/control-panel/profile/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/control-panel/profile/dashboard/dashboard.component.ts

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

src/app/control-panel/profile/profile/profile.component.html

@@ -9,6 +9,8 @@
   This is your profile view => You can see all your devices (the availability, params?), all your playlists, and links to create new configuration
 </p>
 
+It's more a dashboard.. like home assistant.
+
 <p>
   Connect new device button => Scanner (?) with wizard ? 
 </p>