Merge pull request #24 from HussainMojahid/Aayushi

Dashboard updated
HussainMojahid · Jul 17, 2023 · 081fbf2 · 081fbf2
2 parents 1c9a550 + 43731e9
commit 081fbf2
Show file tree

Hide file tree

Showing 41 changed files with 1,833 additions and 1,215 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,9 +27,11 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@ng-select/ng-select": "^10.0.3",
     "@popperjs/core": "^2.11.6",
+    "@types/jwt-decode": "^3.1.0",
     "angular-font-awesome": "^3.1.2",
     "chart.js": "^2.9.4",
     "font-awesome": "^4.7.0",
+    "jwt-decode": "^3.1.2",
     "ng-multiselect-dropdown": "^0.3.9",
     "ng-otp-input": "^1.9.2",
     "ngx-otp-input": "^0.11.4",

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -15,6 +15,8 @@ import { AuthGuard } from './services/auth.guard';
 import { FeedbackHistoryComponent } from './feedback-history/feedback-history.component';
 import { ReportComponent } from './shared/report/report.component';
 import { AddNewItemSecondComponent } from './shared/add-new-item-second/add-new-item-second.component';
+import { FoodCategoryComponent } from './shared/food-category/food-category.component';
+
 const routes: Routes = [
   {
     path: '',
@@ -49,6 +51,10 @@ const routes: Routes = [
     path: 'dashbord-modal',
     component: DashboardModalComponent
   },
+  {
+    path: 'food-category',
+    component:FoodCategoryComponent
+  },
   {
     path: 'booking',
     component: BookingComponent,

diff --git a/src/app/dashboard/chart-card/chart-card.component.html b/src/app/dashboard/chart-card/chart-card.component.html
@@ -1,23 +1,74 @@
-<div class=" leading-normal w:[90%] sm:w-[85%] sm:ml-[9%] sm:mr-[3%] sm:mt-[1%] md:mt-[15%] sm:p-[3pt] md:w-[480pt] md:h-[300pt] h-[215pt] bg-#3d484b font-roboto rounded-[4pt] flex flex-col items-center">
-
+<div
+  class="leading-normal w:[90%] sm:w-[85%] sm:ml-[9%] sm:mr-[3%] sm:mt-[1%] md:mt-[15%] sm:p-[3pt] md:w-[480pt] md:h-[300pt] h-[215pt] bg-#3d484b font-roboto rounded-[4pt] flex flex-col items-center"
+>
+  <div
+    class="leading-normal flex justify-between rounded-lg bg-[#49565a] w-[98%] sm:mr-[6%] p-[22px] md:h-[250pt]"
+  >
+    <div
+      class="rounded-[4pt] w-[160pt] h-[160pt] relative flex flex-col items-center justify-center font-roboto sm:mt-[-5%] md:mt-[3%] md:ml-[5%]"
+    >
+      <canvas
+        style="height: 221px; width: 172px"
+        class="flex h-[100vh] justify-center items-center"
+        id="chartDoughnut"
+      ></canvas>
+      <p
+        class="absolute text-white text-[11pt] font-roboto top-[25%] flex flex-col justify-center p-[1.7rem] items-center"
+      >
+        Total Capacity <span class="text-#f5f5f5 text-[18pt]">150</span>
+      </p>
+    </div>
 
-  <div class=" leading-normal flex justify-between rounded-lg bg-[#49565a] w-[98%]  sm:mr-[6%] p-[22px] md:h-[250pt]">
+    <div
+      class="w-[50%] h-[170pt] sm:w-[60%] sm:h-[160pt] font-roboto flex flex-col justify-between p-[20px] sm:p-[30px] md:p-[15px] md:ml-[100pt] items-center font-roboto sm:mt-[-5%] md:mt-[4%]"
+    >
+      <div
+        class="h-[60pt] w-[80pt] sm:h-[50pt] md:h-[70pt] md:w-[90pt] sm:mt-[-10%] sm:w-[70pt] bg-white text-[#85cc71] text-center rounded"
+      >
+        <p
+          class="text-[14pt] sm:text-[12pt] md:text-[16pt] font-roboto-regular mt-[5pt]"
+        >
+          Vacant
+        </p>
+        <span
+          class="font-extrabold text-[22pt] sm:text-[17pt] md:text-[24pt]"
+          >{{ 150 - count.counts }}</span
+        >
+      </div>
+      <div
+        class="h-[60pt] w-[80pt] sm:h-[50pt] sm:w-[70pt] md:h-[70pt] md:w-[90pt] sm:mt-[6pt] bg-white flex flex-col justify-center items-center text-[#fd7272] font-medium text-center rounded sm:mt-[-8%]"
+      >
+        <p class="text-[14pt] md:text-[16pt] sm:text-[12pt] text-[#fd7272]">
+          Occupied
+        </p>
+        <span
+          class="font-extrabold text-[22pt] sm:text-[17pt] md:text-[24pt]"
+          >{{ this.count.counts }}</span
+        >
+      </div>
+    </div>
+  </div>
 
-    <div class="rounded-[4pt] w-[160pt] h-[160pt] relative flex flex-col items-center justify-center font-roboto sm:mt-[-5%] md:mt-[3%] md:ml-[5%]">
-      <canvas style="height:221px; width:172px;" class="flex h-[100vh] justify-center items-center" id="chartDoughnut"></canvas>
-       <p class="absolute text-white text-[11pt] font-roboto top-[25%] flex flex-col justify-center p-[1.7rem] items-center">Total Capacity <span class="text-#f5f5f5 text-[18pt]">150</span></p> 
+  <div
+    class="flex justify-between items-center w-[100%] sm:mt-[-14%] md:mt-[-13%] h-[20%] p-[18px] sm:p-[18px] md:p-[50px]"
+  >
+    <div>
+      <p
+        class="text-[#D4D4D4] sm:text-[12pt] md:text-[16pt] font-roboto-regular"
+      >
+        <span class="font-roboto-black text-[#D4D4D4]"> Last updated: </span> 13
+        min ago
+      </p>
     </div>
-
-    <div class="w-[50%] h-[170pt] sm:w-[60%] sm:h-[160pt] font-roboto flex flex-col justify-between p-[20px] sm:p-[30px] md:p-[15px] md:ml-[100pt] items-center font-roboto sm:mt-[-5%] md:mt-[4%]">
-      <div class="h-[60pt] w-[80pt] sm:h-[50pt] md:h-[70pt] md:w-[90pt] sm:mt-[-10%] sm:w-[70pt] bg-white text-[#85cc71] text-center rounded"> <p class="text-[14pt] sm:text-[12pt] md:text-[16pt] font-roboto-regular mt-[5pt]">Vacant </p> <span class="font-extrabold text-[22pt] sm:text-[17pt] md:text-[24pt]">{{150 - count.counts}}</span></div>
-      <div class="h-[60pt] w-[80pt] sm:h-[50pt] sm:w-[70pt] md:h-[70pt] md:w-[90pt] sm:mt-[6pt] bg-white flex flex-col justify-center items-center  text-[#fd7272] font-medium text-center rounded sm:mt-[-8%]"> <p class="text-[14pt] md:text-[16pt] sm:text-[12pt] text-[#fd7272]">Occupied</p> <span class="font-extrabold text-[22pt] sm:text-[17pt] md:text-[24pt]">{{this.count.counts}}</span> </div>
+    <div
+      class="font-roboto-regular flex text-orangess justify-between items-center w-[90pt] p-[24px] h-[17pt] md:h-[20rem] font-roboto"
+    >
+    <button (click)="fetchPeopleCount()">
+      <img src="../../../assets/img/refresh2.svg" height="" width="90%" alt="">
+    </button>
+    <a (click)="fetchPeopleCount()">
+      <p class="text-[18pt] sm:text-[11pt] md:text-[20pt]">Refresh</p>
+    </a>
     </div>
-
   </div>
-
-    <div class="flex justify-between items-center w-[100%] sm:mt-[-14%] md:mt-[-13%]  h-[20%] p-[18px] sm:p-[18px] md:p-[50px]">
-      <div> <p class="text-[#D4D4D4] sm:text-[12pt] md:text-[16pt] font-roboto-regular"><span class="font-roboto-black text-[#D4D4D4]"> Last updated: </span> 13 min ago</p> </div>
-      <div class="font-roboto-regular flex text-orangess justify-between items-center w-[90pt] p-[24px] h-[17pt] md:h-[20rem] font-roboto "> <a href="/"><img src="../../../assets/img/refresh2.svg" height="" width="90%" alt=""></a><a href="/"><p class="text-[18pt] sm:text-[11pt] md:text-[20pt]">Refresh</p></a></div>
-    </div>
-
-</div>
+</div>
diff --git a/src/app/dashboard/chart-card/chart-card.component.ts b/src/app/dashboard/chart-card/chart-card.component.ts
@@ -12,29 +12,50 @@ export class ChartCardComponent implements OnInit {
   constructor(public count: PeopleCountService) {}
   data:any;
   ngOnInit() {
-    this.count.getPeopleCount().subscribe((val) => {
-      this.count.counts = val.data[0].attributes.rcounting;     
-      const dataDoughnut = {
-        // labels: ['Vacant', 'Occupied'],
-        datasets: [
-          {
-            label: 'Canteen Space',
-            data: [150 - this.count.counts, this.count.counts],
-            backgroundColor: ['rgb(	133,204,113)', 'rgb(253,114,114)'],
-            hoverOffset: 4,
-            borderWidth: 15,
-            borderHeight: "200%",
-            height: 100,
-            borderColor:"rgb(73, 86, 90)",
-            layout: {
+    this.fetchPeopleCount();
+
+
+  }
+  // ngOnInit() {
+  //   this.count.getPeopleCount().subscribe((val) => {
+  //     this.count.counts = val.data[0].attributes.rcounting;     
+  //     const dataDoughnut = {
+  //       // labels: ['Vacant', 'Occupied'],
+  //       datasets: [
+  //         {
+  //           label: 'Canteen Space',
+  //           data: [150 - this.count.counts, this.count.counts],
+  //           backgroundColor: ['rgb(	133,204,113)', 'rgb(253,114,114)'],
+  //           hoverOffset: 4,
+  //           borderWidth: 15,
+  //           borderHeight: "200%",
+  //           height: 100,
+  //           borderColor:"rgb(73, 86, 90)",
+  //           layout: {
 
-          }
-            // borderRadius:"innerEnd",
-            // spacing:50
-          },
+  //         }
+  //           // borderRadius:"innerEnd",
+  //           // spacing:50
+  //         },
 
-        ],
-      };
+  //       ],
+  //     };
+      fetchPeopleCount() {
+        this.count.getPeopleCount().subscribe((val) => {
+          this.count.counts = val.data[0].attributes.rcounting;
+
+          const dataDoughnut = {
+            datasets: [
+              {
+                data: [150 - this.count.counts, this.count.counts],
+                backgroundColor: ['rgb(133,204,113)', 'rgb(253,114,114)'],
+                hoverOffset: 4,
+                borderWidth: 15,
+                borderColor: 'rgb(73, 86, 90)',
+              },
+            ],
+          };
+
       const configDoughnut = {
         labels: ['Reserved','Vacant'],
         dataset : [{

diff --git a/src/app/dashboard/dashboard-modal/dashboard-modal.component.css b/src/app/dashboard/dashboard-modal/dashboard-modal.component.css
@@ -10,7 +10,7 @@
   color: white;
   border: none;
 }
-#box-1 #box-1-img{
+.box #bread{
   background-color: #ffe17d93;
 }
 #box-2 #box-2-img{
@@ -93,10 +93,10 @@
   flex-direction: column;
   justify-content:space-between;
   width: 90%;
-  height: 480pt;
-  margin-left: 0.5rem;
-  margin-top: -1rem;
-  margin-bottom: 5rem;
+
+  margin-left: 1rem;
+  /* margin-top: -1rem;
+  margin-bottom: 5rem;  */
 }