CP #1 Page accueil et init du projet, primeng, font awesome etc

angular.json

@@ -25,7 +25,11 @@
             "styles": [
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/primeicons/primeicons.css",
+              "./node_modules/primeng/resources/themes/nova-light/theme.css",
+              "./node_modules/primeng/resources/primeng.min.css",
+              "./node_modules/font-awesome/css/font-awesome.css"
             ],
             "scripts": []
           },
@@ -83,7 +87,11 @@
             "styles": [
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/primeicons/primeicons.css",
+              "./node_modules/primeng/resources/themes/nova-light/theme.css",
+              "./node_modules/primeng/resources/primeng.min.css",
+              "./node_modules/font-awesome/css/font-awesome.css"
             ],
             "scripts": [],
             "assets": [

package-lock.json

@@ -1135,6 +1135,14 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.1.tgz",
       "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw=="
     },
+    "acorn5-object-spread": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn5-object-spread/-/acorn5-object-spread-4.0.0.tgz",
+      "integrity": "sha1-1XWAge7ZcSGrC+R+Mcqu8qo5lpc=",
+      "requires": {
+        "acorn": "^5.1.2"
+      }
+    },
     "adm-zip": {
       "version": "0.4.13",
       "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.13.tgz",
@@ -1195,6 +1203,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-font-awesome": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz",
+      "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -4402,6 +4415,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4534,13 +4552,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4553,18 +4569,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4667,8 +4680,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4678,7 +4690,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4691,20 +4702,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4721,7 +4729,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4794,8 +4801,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4805,7 +4811,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4911,7 +4916,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8842,6 +8846,16 @@
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
+    "primeicons": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-1.0.0.tgz",
+      "integrity": "sha512-p/hzIjUVccW4eJPhuORHI3AUkDpqfvCQVrjxbFEejnTEdWY4C8fomVfjiaA9jCu83fSQnBHuRIGB96iAR8R6uA=="
+    },
+    "primeng": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-8.0.1.tgz",
+      "integrity": "sha512-87HQEh+S4lm4r280Thlk3pHzJJ1lr4Dl82zidnfWeOBZ5lMbK2w9w9yKJH875aPKWs0MMDVZeQ5V9jMWolRjlA=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -9911,6 +9925,7 @@
       "resolved": "https://registry.npmjs.org/rijs.sync/-/rijs.sync-2.3.5.tgz",
       "integrity": "sha512-tcbhmjLyWb+2s2gdiSmROEoD/OQPFeKC9xBnKgs0H+umY8CaVrVPGFdr1y1qovm7HxUbdk/BKqi94GQDc5XB3A==",
       "requires": {
+        "buble": "github:pemrouz/buble#4e639aeeb64712ac95dc30a52750d1ee4432c9c8",
         "express": "^4.14.0",
         "lru_map": "^0.3.3",
         "platform": "^1.3.4",
@@ -9920,7 +9935,7 @@
       "dependencies": {
         "buble": {
           "version": "github:pemrouz/buble#4e639aeeb64712ac95dc30a52750d1ee4432c9c8",
-          "from": "github:pemrouz/buble#4e639aeeb64712ac95dc30a52750d1ee4432c9c8",
+          "from": "github:pemrouz/buble",
           "requires": {
             "acorn": "^5.1.2",
             "acorn-jsx": "^3.0.1",
@@ -9930,16 +9945,6 @@
             "minimist": "^1.2.0",
             "os-homedir": "^1.0.1",
             "vlq": "^0.2.2"
-          },
-          "dependencies": {
-            "acorn5-object-spread": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/acorn5-object-spread/-/acorn5-object-spread-4.0.0.tgz",
-              "integrity": "sha1-1XWAge7ZcSGrC+R+Mcqu8qo5lpc=",
-              "requires": {
-                "acorn": "^5.1.2"
-              }
-            }
           }
         },
         "magic-string": {

package.json

@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
+    "@angular/animations": "^7.1.4",
     "@angular/common": "~7.1.0",
     "@angular/compiler": "~7.1.0",
     "@angular/core": "~7.1.0",
@@ -19,11 +19,15 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "angular-font-awesome": "^3.1.2",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "ngx-bootstrap": "^3.2.0",
     "popper": "^1.0.1",
+    "primeicons": "^1.0.0",
+    "primeng": "^8.0.1",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"

src/app/app.component.html

@@ -1 +1,18 @@
+<p-toolbar>
+    <div class="ui-toolbar-group-left">
+        <button pButton type="button" label="New" icon="pi pi-plus"></button>
+        <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
+            
+        <i class="pi pi-bars"></i>
+        
+        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
+    </div>
+    
+    <div class="ui-toolbar-group-right">
+        <button pButton type="button" icon="fa fa fa-sign-in" label="Log in" iconPos="right" (click)="LogIn()"></button>
+        <button pButton type="button" icon="pi pi-search"></button>
+        <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
+        <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
+    </div>
+</p-toolbar>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/components/common/menuitem';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
   title = 'MyControlPanel';
+
+  items : MenuItem[];
+
+  constructor(){}
+  ngOnInit(){
+    this.items = [
+      {label: 'Update', icon: 'pi pi-refresh'},
+      {label: 'Delete', icon: 'pi pi-times'}
+      
+  ];
+
+
+  }
+
+  public LogIn() 
+  {
+    console.log('helloooo');
+    // change route -> /login
+  }
 }

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -9,7 +10,11 @@ import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
-import { BorderCardDirective } from './directives/border-card.directive'
+import { BorderCardDirective } from './directives/border-card.directive';
+import { ToolbarModule } from 'primeng/toolbar';
+import { ButtonModule } from 'primeng/button';
+import { SplitButtonModule } from 'primeng/splitbutton';
+
 
 
 @NgModule({
@@ -24,7 +29,11 @@ import { BorderCardDirective } from './directives/border-card.directive'
     AlertModule.forRoot(),
     BsDatepickerModule.forRoot(),
     BsDropdownModule.forRoot(),
-    CarouselModule.forRoot()
+    CarouselModule.forRoot(),
+    BrowserAnimationsModule,
+    ToolbarModule,
+    ButtonModule,
+    SplitButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home-page/home-page.component.ts

@@ -3,8 +3,6 @@ import { Router } from '@angular/router'
 
 
 
-
-
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',