Skip to content

2
2023-261
Commit 81fd3b62 authored by Imesh Dilshan's avatar Imesh Dilshan
Browse files
Options

changes

parent 0329a5ff
Pipeline #6673 failed with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 171 additions and 127 deletions
      src/app/components/dashboard/dashboard.component.html
      View file @ 81fd3b62
      <!DOCTYPE html> <!DOCTYPE html>
      <html> <html>
      <head> <head>
      <title>Customer Satisfaction Survey</title> <title>Security Assistant Dashboard</title>
      <style> <style>
      body { body {
      font-family: Arial, sans-serif; font-family: Arial, sans-serif;
      ...@@ -17,54 +17,57 @@ ...@@ -17,54 +17,57 @@
      border-radius: 5px; border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      border: 2px solid #ccc; border: 2px solid #ccc;
      background-color: #f9f9f9; /* Update to desired light color */ background-color: #f9f9f9;
      text-align: center;
      } }
      h1 { h1 {
      text-align: center;
      color: #333; color: #333;
      margin-top: 0;
      } }
      .response-chart { .response-chart {
      margin-bottom: 10px; display: flex;
      text-align: center; justify-content: center;
      margin-bottom: 20px;
      } }
      .response-chart input[type="radio"] { .response-option {
      display: none; margin: 0 10px;
      cursor: pointer;
      transition: transform 0.3s ease;
      } }
      .response-chart label { .response-option:hover {
      display: inline-block; transform: scale(1.1);
      text-align: center;
      width: 60px;
      height: 60px;
      line-height: 60px;
      border-radius: 50%;
      border: 2px solid #ccc;
      padding: 0;
      cursor: pointer;
      transition: background-color 0.3s ease;
      } }
      .response-chart label:hover { .response-option input[type="radio"] {
      background-color: #f1f1f1; display: none;
      } }
      .response-chart input[type="radio"]:checked + label { .response-option label {
      background-color: #4CAF50; display: block;
      color: #fff; width: 100px;
      border-color: #4CAF50; height: 100px;
      border-radius: 50%;
      border: 2px solid #ccc;
      background-color: #f9f9f9;
      overflow: hidden;
      } }
      .response-chart label img { .response-option label img {
      max-width: 100%; max-width: 100%;
      max-height: 100%; max-height: 100%;
      } }
      .response-option input[type="radio"]:checked + label {
      border-color: #4CAF50;
      box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
      }
      .stats-container { .stats-container {
      text-align: center; margin-bottom: 20px;
      margin-top: 20px;
      } }
      .stats { .stats {
      ...@@ -81,29 +84,61 @@ ...@@ -81,29 +84,61 @@
      } }
      .total-incidents-label { .total-incidents-label {
      display: inline-block;
      font-size: 14px; font-size: 14px;
      color: #555; color: #555;
      } }
      .total-incidents { .total-incidents {
      display: inline-block;
      font-size: 20px; font-size: 20px;
      color: #333; color: #333;
      } }
      .security-tasks {
      margin-top: 40px;
      }
      .security-tasks label {
      display: block;
      margin-bottom: 10px;
      text-align: left;
      font-weight: bold;
      color: #333;
      }
      .security-tasks input[type="checkbox"] {
      margin-right: 10px;
      }
      .security-tasks button {
      margin-top: 10px;
      padding: 8px 16px;
      font-size: 16px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      }
      .security-tasks button:hover {
      background-color: #45a049;
      }
      </style> </style>
      </head> </head>
      <body> <body>
      <div class="container"> <div class="container">
      <h1>Customer Satisfaction Survey</h1> <h1>Security Assistant Dashboard</h1>
      <div class="response-chart"> <div class="response-chart">
      <div class="response-option">
      <input type="radio" id="like" name="satisfaction" value="like" (change)="handleResponse('like')"> <input type="radio" id="like" name="satisfaction" value="like" (change)="handleResponse('like')">
      <label for="like"><img src="assets/images/dashboard/like.png" alt="Like"></label> <label for="like"><img src="assets/images/dashboard/like.png" alt="Like"></label>
      </div>
      <div class="response-option">
      <input type="radio" id="dislike" name="satisfaction" value="dislike" (change)="handleResponse('dislike')"> <input type="radio" id="dislike" name="satisfaction" value="dislike" (change)="handleResponse('dislike')">
      <label for="dislike"><img src="assets/images/dashboard/dislike.png" alt="Dislike"></label> <label for="dislike"><img src="assets/images/dashboard/dislike.png" alt="Dislike"></label>
      </div>
      </div> </div>
      <!-- Add more response options if needed --> <!-- Add more response options if needed -->
      ...@@ -119,54 +154,20 @@ ...@@ -119,54 +154,20 @@
      <span id="dislikesCount">0</span> <span id="dislikesCount">0</span>
      <span id="dislikesPercentage">(0%)</span> <span id="dislikesPercentage">(0%)</span>
      </div> </div>
      </div>
      <div class="total-incidents-label"> <div class="total-incidents-label">
      <strong>Total Incidents:</strong> <strong>Total Incidents:</strong>
      </div> </div>
      <div class="total-incidents"> <div class="total-incidents">
      <span id="incidentsCount">0</span> <span id="incidentsCount">0</span>
      </div> </div>
      </div>
      <!-- <script> <div class="security-tasks">
      // JavaScript code for handling the selected response
      var incidentsCount = 0;
      var likesCount = 0; <button type="button">Complete Tasks</button>
      var dislikesCount = 0; </div>
      var incidentsCountElem = document.getElementById('incidentsCount');
      var likesCountElem = document.getElementById('likesCount');
      var dislikesCountElem = document.getElementById('dislikesCount');
      var likesPercentageElem = document.getElementById('likesPercentage');
      var dislikesPercentageElem = document.getElementById('dislikesPercentage');
      function updateStats() {
      incidentsCountElem.textContent = incidentsCount;
      likesCountElem.textContent = likesCount;
      dislikesCountElem.textContent = dislikesCount;
      var totalResponses = likesCount + dislikesCount;
      var likesPercentage = (likesCount / totalResponses) * 100;
      var dislikesPercentage = (dislikesCount / totalResponses) * 100;
      likesPercentageElem.textContent = '(' + likesPercentage.toFixed(1) + '%)';
      dislikesPercentageElem.textContent = '(' + dislikesPercentage.toFixed(1) + '%)';
      }
      var radios = document.querySelectorAll('input[type="radio"]');
      for (var i = 0; i < radios.length; i++) {
      radios[i].addEventListener('change', function() {
      console.log('Selected response:', this.value);
      incidentsCount++;
      if (this.value === 'like') {
      likesCount++;
      } else if (this.value === 'dislike') {
      dislikesCount++;
      }
      updateStats();
      this.checked = false; // Uncheck the radio button for multiple responses
      });
      }
      </script> -->
      </div> </div>
      </body> </body>
      </html> </html>
      src/app/components/dashboard/dashboard.component.ts
      View file @ 81fd3b62
      ...@@ -37,11 +37,15 @@ export class DashboardComponent implements OnInit { ...@@ -37,11 +37,15 @@ export class DashboardComponent implements OnInit {
      handleResponse(response: string) { handleResponse(response: string) {
      this.incidentsCount++; this.incidentsCount++;
      if (response === 'like') { if (response === 'like') {
      this.likesCount++; this.likesCount++;
      this.dislikesCount = 0; // Reset dislikes count to 0
      } else if (response === 'dislike') { } else if (response === 'dislike') {
      this.dislikesCount++; this.dislikesCount++;
      this.likesCount = 0; // Reset likes count to 0
      } }
      this.updateStats(); this.updateStats();
      } }
      } }
      src/app/components/pages/list-page/list-page.component.html
      View file @ 81fd3b62
      <!-- Container-fluid starts--> <!DOCTYPE html>
      <div class="container-fluid"> <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Profile Page</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <style>
      .profile-card {
      max-width: 300px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      text-align: center;
      background-color: #f9f9f9;
      margin-bottom: 20px;
      }
      .profile-picture {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 20px;
      }
      .profile-name {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      }
      .registration-number {
      font-size: 16px;
      color: #777;
      margin-bottom: 20px;
      }
      </style>
      </head>
      <body>
      <div class="container">
      <div class="row"> <div class="row">
      <div class="col-sm-12"> <div class="col-md-6">
      <div class="card"> <div class="profile-card">
      <div class="card-header"> <img class="profile-picture" src="../../../../assets/images/dashboard/isira.jpeg" alt="Profile Picture">
      <h5>Page Details</h5> <h2 class="profile-name">G.G.I V.M Gamage</h2>
      </div> <p class="registration-number">Registration Number: IT20094690</p>
      <div class="card-body"> <!-- Add more profile details here -->
      <div class="custom-datatable"> </div>
      <button class="btn btn-primary mr-1 mb-3" style="float: right;">Delete</button> </div>
      <div class="clearfix"></div> <div class="col-md-6">
      <ngx-datatable class="bootstrap" [rows]="list_pages" [columnMode]="'force'" [headerHeight]="50" <div class="profile-card">
      [footerHeight]="50" [rowHeight]="'auto'" [limit]="5" [selected]="selected" <img class="profile-picture" src="../../../../assets/images/dashboard/samara.jpeg" alt="Profile Picture">
      [selectionType]="'checkbox'" [selectAllRowsOnPage]="false" (select)='onSelect($event)'> <h2 class="profile-name">B.S. Sithmini</h2>
      <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" <p class="registration-number">Registration Number: IT20036102</p>
      [draggable]="false" [resizeable]="false" [headerCheckboxable]="true" <!-- Add more profile details here -->
      [checkboxable]="true"> </div>
      <button type="button" class="btn btn-primery">Delete</button> </div>
      </ngx-datatable-column> <div class="col-md-6">
      <ngx-datatable-column name="Name"></ngx-datatable-column> <div class="profile-card">
      <ngx-datatable-column name="Status"></ngx-datatable-column> <img class="profile-picture" src="../../../../assets/images/dashboard/harshi.jpeg" alt="Profile Picture">
      <ngx-datatable-column prop="created on"></ngx-datatable-column> <h2 class="profile-name">N.W. Harshani Jayawardhana</h2>
      </ngx-datatable> <p class="registration-number">Registration Number: IT20140816 </p>
      </div> <!-- Add more profile details here -->
      </div> </div>
      </div> </div>
      </div> <div class="col-md-6">
      </div> <div class="profile-card">
      </div> <img class="profile-picture" src="../../../../assets/images/dashboard/Rajakaruna.jpg" alt="Profile Picture">
      <!-- Container-fluid Ends--> <h2 class="profile-name">R.H.M.I.D Rajakaruna </h2>
      \ No newline at end of file <p class="registration-number">Registration Number: IT20246396</p>
      <!-- Add more profile details here -->
      </div>
      </div>
      </div>
      </div>
      </body>
      </html>
      src/app/components/pages/pages-routing.module.ts
      View file @ 81fd3b62
      ...@@ -11,7 +11,7 @@ const routes: Routes = [ ...@@ -11,7 +11,7 @@ const routes: Routes = [
      path: 'list-page', path: 'list-page',
      component: ListPageComponent, component: ListPageComponent,
      data: { data: {
      title: "List Page", title: "About Us",
      breadcrumb: "List Page" breadcrumb: "List Page"
      } }
      }, },
      ......
      src/app/shared/components/header/header.component.html
      View file @ 81fd3b62
      ...@@ -48,21 +48,12 @@ ...@@ -48,21 +48,12 @@
      </ul> </ul>
      </li> </li>
      <li class="onhover-dropdown"> <li class="onhover-dropdown">
      <span class="badge badge-pill badge-primary pull-right notification-badge">3</span> <span class="badge badge-pill badge-primary pull-right notification-badge">1</span>
      <app-feather-icons [icon]="'bell'"></app-feather-icons><span class="dot"></span> <app-feather-icons [icon]="'bell'"></app-feather-icons><span class="dot"></span>
      <ul class="notification-dropdown onhover-show-div"> <ul class="notification-dropdown onhover-show-div">
      <li>Notification <span class="badge badge-pill badge-primary pull-right">3</span></li> <li>Notification <span class="badge badge-pill badge-primary pull-right">1</span></li>
      <li> <li>
      <div class="media">
      <div class="media-body">
      <h6 class="mt-0"><span>
      <app-feather-icons class="shopping-color" [icon]="'shopping-bag'">
      </app-feather-icons>
      </span>Your order ready for Ship..!
      </h6>
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetuer.</p>
      </div>
      </div>
      </li> </li>
      <li> <li>
      <div class="media"> <div class="media">
      ...@@ -76,7 +67,7 @@ ...@@ -76,7 +67,7 @@
      </div> </div>
      </li> </li>
      <li> <li>
      <div class="media"> <!-- <div class="media">
      <div class="media-body"> <div class="media-body">
      <h6 class="mt-0 txt-danger"><span> <h6 class="mt-0 txt-danger"><span>
      <app-feather-icons class="alert-color font-danger" [icon]="'alert-circle'"> <app-feather-icons class="alert-color font-danger" [icon]="'alert-circle'">
      ...@@ -84,7 +75,7 @@ ...@@ -84,7 +75,7 @@
      </span>250 MB trash files</h6> </span>250 MB trash files</h6>
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetuer.</p> <p class="mb-0">Lorem ipsum dolor sit amet, consectetuer.</p>
      </div> </div>
      </div> </div> -->
      </li> </li>
      <li class="txt-dark"><a href="javascript:void(0)">All</a> notification</li> <li class="txt-dark"><a href="javascript:void(0)">All</a> notification</li>
      </ul> </ul>
      ......
      src/app/shared/service/nav.service.ts
      View file @ 81fd3b62
      ...@@ -73,12 +73,12 @@ export class NavService { ...@@ -73,12 +73,12 @@ export class NavService {
      // { path: '/coupons/create-coupons', title: 'Create Coupons', type: 'link' }, // { path: '/coupons/create-coupons', title: 'Create Coupons', type: 'link' },
      ] ]
      }, },
      // { {
      // title: 'Pages', icon: 'clipboard', type: 'sub', active: false, children: [ title: 'About Us', icon: 'clipboard', type: 'sub', active: false, children: [
      // { path: '/pages/list-page', title: 'List Page', type: 'link' }, { path: '/pages/list-page', title: 'About Us', type: 'link' },
      // { path: '/pages/create-page', title: 'Create Page', type: 'link' }, // { path: '/pages/create-page', title: 'Create Page', type: 'link' },
      // ] ]
      // }, },
      // { // {
      // title: 'Media', path: '/media', icon: 'camera', type: 'link', active: false // title: 'Media', path: '/media', icon: 'camera', type: 'link', active: false
      // }, // },
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment