Added services,sidebar,ham,chart

package.json

@@ -18,6 +18,14 @@
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
+    "@fortawesome/angular-fontawesome": "^0.12.0",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@popperjs/core": "^2.11.6",
+    "chart.js": "^2.9.4",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
@@ -26,6 +34,8 @@
     "@angular-devkit/build-angular": "^15.0.3",
     "@angular/cli": "~15.0.3",
     "@angular/compiler-cli": "^15.0.0",
+    "@angular/localize": "^15.0.0",
+    "@types/chart.js": "^2.9.37",
     "@types/jasmine": "~4.3.0",
     "autoprefixer": "^10.4.13",
     "jasmine-core": "~4.5.0",

src/app/app.component.html

@@ -1,8 +1,8 @@
-<!-- <app-nav></app-nav> -->
-<!-- <app-login></app-login> -->
-<app-auth-modal></app-auth-modal>
-<!-- <h1>Hello</h1>      -->
+<app-nav></app-nav>
 
-<!-- <app-forget-password></app-forget-password> -->
+<app-dashboard-modal></app-dashboard-modal>
 
-<!-- <app-change-password></app-change-password> -->
+<!-- <app-food-card></app-food-card> ->
+<!-- <app-sidebar *ngIf="true"></app-sidebar>/ -->
+
+<app-auth-modal *ngIf="auth.isAuthenticated"></app-auth-modal>

src/app/app.component.ts

@@ -1,10 +1,17 @@
 import { Component } from '@angular/core';
+import { faIceCream } from '@fortawesome/free-solid-svg-icons';
+import { AuthService } from './services/auth.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+
+  constructor(public  auth: AuthService){
+
+  }
+
   title = 'canteen-fe';
 }

src/app/app.module.ts

@@ -5,16 +5,24 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavComponent } from './nav/nav.component';
 import { UserModule } from './user/user.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { DashboardModule } from './dashboard/dashboard.module';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavComponent
+    NavComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     UserModule,
+    FontAwesomeModule,
+    DashboardModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dashboard/chart-card/chart-card.component.html

@@ -0,0 +1,9 @@
+<br>
+<div class="shadow-lg rounded-lg mt-14 mb-2 mx-2 overflow-hidden">
+
+
+    <canvas class="pb-2 bg-gray-100" id="chartDoughnut"></canvas>
+
+  </div>
+
+

src/app/dashboard/chart-card/chart-card.component.spec.ts

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

src/app/dashboard/chart-card/chart-card.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'chart.js'
+
+@Component({
+  selector: 'app-chart-card',
+  templateUrl: './chart-card.component.html',
+  styleUrls: ['./chart-card.component.css']
+})
+export class ChartCardComponent implements OnInit {
+
+  ngOnInit(){
+
+    const dataDoughnut = {
+      labels: ["Vacant", "Occupied"],
+      datasets: [
+        {
+          label: "Canteen Space",
+          data: [300, 50,],
+          backgroundColor: [
+            'rgb(54, 162, 235)',
+
+            'rgb(255, 99, 132)',
+          ],
+          hoverOffset: 4,
+        },
+      ],
+    };
+
+    const configDoughnut = {
+      type: "doughnut",
+      data: dataDoughnut,
+      options: {},
+    };
+
+    const chartBar = new Chart(
+      document.getElementById("chartDoughnut") as HTMLCanvasElement,
+      // el.nativeElement.chartDoughnut,
+      configDoughnut
+
+    );
+
+  }
+
+}

src/app/dashboard/dashboard-modal/dashboard-modal.component.html

@@ -0,0 +1,18 @@
+<div>
+  <app-chart-card></app-chart-card>
+  <div class="flex justify-end mx-1 my-1">
+    <label class="inline-flex relative items-center cursor-pointer">
+      <input type="checkbox" value="" class="sr-only peer" checked />
+      <div
+        class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
+      ></div>
+      <span class="ml-3 text-sm font-medium text-gray-900"></span>
+    </label>
+  </div>
+
+  <app-food-section></app-food-section>
+  <app-food-section></app-food-section>
+
+  <app-food-section></app-food-section>
+
+</div>

src/app/dashboard/dashboard-modal/dashboard-modal.component.spec.ts

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

src/app/dashboard/dashboard-modal/dashboard-modal.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-modal',
+  templateUrl: './dashboard-modal.component.html',
+  styleUrls: ['./dashboard-modal.component.css']
+})
+export class DashboardModalComponent {
+
+}

src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FoodSectionComponent } from './food-section/food-section.component';
+import { FoodCardComponent } from './food-card/food-card.component';
+import { ChartCardComponent } from './chart-card/chart-card.component';
+import { DashboardModalComponent } from './dashboard-modal/dashboard-modal.component';
+
+
+
+
+@NgModule({
+  declarations: [
+    FoodSectionComponent,
+    FoodCardComponent,
+    ChartCardComponent,
+    DashboardModalComponent
+  ],
+  imports: [
+    CommonModule
+
+  ],
+  exports : [
+    FoodCardComponent,
+    FoodSectionComponent,
+    ChartCardComponent,
+    DashboardModalComponent
+  ]
+})
+export class DashboardModule { }

src/app/dashboard/food-card/food-card.component.html

@@ -0,0 +1,24 @@
+<!-- <div class="carousel-item active mx-2 my-2">
+  <img
+    src="https://cdn.britannica.com/98/235798-050-3C3BA15D/Hamburger-and-french-fries-paper-box.jpg"
+    class=" rounded-lg "
+    alt="Wild Landscape"
+  />
+</div> -->
+
+
+<div class="carousel-inner  relative w-full overflow-hidden rounded-lg">
+<!-- <a
+  href="#"
+  class="block mx-2 border border-gray-200 shadow-md hover:bg-gray-100 "
+> -->
+  <img
+    [src]="imgUrl"
+
+    class="rounded-lg w-full"
+    alt="Wild Landscape"
+  />
+<!-- </a> -->
+</div>
+
+

src/app/dashboard/food-card/food-card.component.spec.ts

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

src/app/dashboard/food-card/food-card.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-food-card',
+  templateUrl: './food-card.component.html',
+  styleUrls: ['./food-card.component.css']
+})
+export class FoodCardComponent {
+
+  imgUrl = 'https://cdn.britannica.com/98/235798-050-3C3BA15D/Hamburger-and-french-fries-paper-box.jpg'
+}

src/app/dashboard/food-section/food-section.component.html

@@ -0,0 +1,60 @@
+<div
+  id="foodsectionCrousel"
+  class="carousel slide carousel-fade relative mx-2 my-2"
+>
+  <div class="carousel-inner relative w-full overflow-hidden">
+    <app-food-card> </app-food-card>
+  </div>
+
+  <button
+    type="button"
+    class="carousel-control-prev absolute top-0 left-0 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
+    data-carousel-prev
+  >
+    <span
+      class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50I group-focus:ring-4 group-focus:ring-white group-focus:outline-none"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-5 h-5 text-white sm:w-6 sm:h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 19l-7-7 7-7"
+        ></path>
+      </svg>
+      <span class="sr-only">Previous</span>
+    </span>
+  </button>
+  <button
+    type="button"
+    class="carousel-control-next absolute top-0 right-0 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
+  >
+    <span
+      class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-5 h-5 text-white sm:w-6 sm:h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5l7 7-7 7"
+        ></path>
+      </svg>
+      <span class="sr-only">Next</span>
+    </span>
+  </button>
+</div>

src/app/dashboard/food-section/food-section.component.spec.ts

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