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
      Hide 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>
      <html>
      <head>
      <title>Customer Satisfaction Survey</title>
      <title>Security Assistant Dashboard</title>
      <style>
      body {
      font-family: Arial, sans-serif;
      ......@@ -17,54 +17,57 @@
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      border: 2px solid #ccc;
      background-color: #f9f9f9; /* Update to desired light color */
      background-color: #f9f9f9;
      text-align: center;
      }
      h1 {
      text-align: center;
      color: #333;
      margin-top: 0;
      }
      .response-chart {
      margin-bottom: 10px;
      text-align: center;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      }
      .response-chart input[type="radio"] {
      display: none;
      .response-option {
      margin: 0 10px;
      cursor: pointer;
      transition: transform 0.3s ease;
      }
      .response-chart label {
      display: inline-block;
      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-option:hover {
      transform: scale(1.1);
      }
      .response-chart label:hover {
      background-color: #f1f1f1;
      .response-option input[type="radio"] {
      display: none;
      }
      .response-chart input[type="radio"]:checked + label {
      background-color: #4CAF50;
      color: #fff;
      border-color: #4CAF50;
      .response-option label {
      display: block;
      width: 100px;
      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-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 {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
      }
      .stats {
      ......@@ -81,29 +84,61 @@
      }
      .total-incidents-label {
      display: inline-block;
      font-size: 14px;
      color: #555;
      }
      .total-incidents {
      display: inline-block;
      font-size: 20px;
      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>
      </head>
      <body>
      <div class="container">
      <h1>Customer Satisfaction Survey</h1>
      <h1>Security Assistant Dashboard</h1>
      <div class="response-chart">
      <div class="response-option">
      <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>
      </div>
      <div class="response-option">
      <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>
      </div>
      </div>
      <!-- Add more response options if needed -->
      ......@@ -119,54 +154,20 @@
      <span id="dislikesCount">0</span>
      <span id="dislikesPercentage">(0%)</span>
      </div>
      <div class="total-incidents-label">
      <strong>Total Incidents:</strong>
      </div>
      <div class="total-incidents">
      <span id="incidentsCount">0</span>
      </div>
      </div>
      <!-- <script>
      // JavaScript code for handling the selected response
      var incidentsCount = 0;
      var likesCount = 0;
      var dislikesCount = 0;
      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 class="total-incidents-label">
      <strong>Total Incidents:</strong>
      </div>
      <div class="total-incidents">
      <span id="incidentsCount">0</span>
      </div>
      <div class="security-tasks">
      <button type="button">Complete Tasks</button>
      </div>
      </div>
      </body>
      </html>
      src/app/components/dashboard/dashboard.component.ts
      View file @ 81fd3b62
      ......@@ -37,11 +37,15 @@ export class DashboardComponent implements OnInit {
      handleResponse(response: string) {
      this.incidentsCount++;
      if (response === 'like') {
      this.likesCount++;
      this.dislikesCount = 0; // Reset dislikes count to 0
      } else if (response === 'dislike') {
      this.dislikesCount++;
      this.likesCount = 0; // Reset likes count to 0
      }
      this.updateStats();
      }
      }
      src/app/components/pages/list-page/list-page.component.html
      View file @ 81fd3b62
      <!-- Container-fluid starts-->
      <div class="container-fluid">
      <!DOCTYPE html>
      <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="col-sm-12">
      <div class="card">
      <div class="card-header">
      <h5>Page Details</h5>
      </div>
      <div class="card-body">
      <div class="custom-datatable">
      <button class="btn btn-primary mr-1 mb-3" style="float: right;">Delete</button>
      <div class="clearfix"></div>
      <ngx-datatable class="bootstrap" [rows]="list_pages" [columnMode]="'force'" [headerHeight]="50"
      [footerHeight]="50" [rowHeight]="'auto'" [limit]="5" [selected]="selected"
      [selectionType]="'checkbox'" [selectAllRowsOnPage]="false" (select)='onSelect($event)'>
      <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false"
      [draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
      [checkboxable]="true">
      <button type="button" class="btn btn-primery">Delete</button>
      </ngx-datatable-column>
      <ngx-datatable-column name="Name"></ngx-datatable-column>
      <ngx-datatable-column name="Status"></ngx-datatable-column>
      <ngx-datatable-column prop="created on"></ngx-datatable-column>
      </ngx-datatable>
      </div>
      </div>
      </div>
      <div class="col-md-6">
      <div class="profile-card">
      <img class="profile-picture" src="../../../../assets/images/dashboard/isira.jpeg" alt="Profile Picture">
      <h2 class="profile-name">G.G.I V.M Gamage</h2>
      <p class="registration-number">Registration Number: IT20094690</p>
      <!-- Add more profile details here -->
      </div>
      </div>
      <div class="col-md-6">
      <div class="profile-card">
      <img class="profile-picture" src="../../../../assets/images/dashboard/samara.jpeg" alt="Profile Picture">
      <h2 class="profile-name">B.S. Sithmini</h2>
      <p class="registration-number">Registration Number: IT20036102</p>
      <!-- Add more profile details here -->
      </div>
      </div>
      <div class="col-md-6">
      <div class="profile-card">
      <img class="profile-picture" src="../../../../assets/images/dashboard/harshi.jpeg" alt="Profile Picture">
      <h2 class="profile-name">N.W. Harshani Jayawardhana</h2>
      <p class="registration-number">Registration Number: IT20140816 </p>
      <!-- Add more profile details here -->
      </div>
      </div>
      <div class="col-md-6">
      <div class="profile-card">
      <img class="profile-picture" src="../../../../assets/images/dashboard/Rajakaruna.jpg" alt="Profile Picture">
      <h2 class="profile-name">R.H.M.I.D Rajakaruna </h2>
      <p class="registration-number">Registration Number: IT20246396</p>
      <!-- Add more profile details here -->
      </div>
      </div>
      </div>
      </div>
      <!-- Container-fluid Ends-->
      \ No newline at end of file
      </div>
      </body>
      </html>
      src/app/components/pages/pages-routing.module.ts
      View file @ 81fd3b62
      ......@@ -11,7 +11,7 @@ const routes: Routes = [
      path: 'list-page',
      component: ListPageComponent,
      data: {
      title: "List Page",
      title: "About Us",
      breadcrumb: "List Page"
      }
      },
      ......
      src/app/shared/components/header/header.component.html
      View file @ 81fd3b62
      ......@@ -48,21 +48,12 @@
      </ul>
      </li>
      <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>
      <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>
      <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>
      <div class="media">
      ......@@ -76,7 +67,7 @@
      </div>
      </li>
      <li>
      <div class="media">
      <!-- <div class="media">
      <div class="media-body">
      <h6 class="mt-0 txt-danger"><span>
      <app-feather-icons class="alert-color font-danger" [icon]="'alert-circle'">
      ......@@ -84,7 +75,7 @@
      </span>250 MB trash files</h6>
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetuer.</p>
      </div>
      </div>
      </div> -->
      </li>
      <li class="txt-dark"><a href="javascript:void(0)">All</a> notification</li>
      </ul>
      ......
      src/app/shared/service/nav.service.ts
      View file @ 81fd3b62
      ......@@ -73,12 +73,12 @@ export class NavService {
      // { path: '/coupons/create-coupons', title: 'Create Coupons', type: 'link' },
      ]
      },
      // {
      // title: 'Pages', icon: 'clipboard', type: 'sub', active: false, children: [
      // { path: '/pages/list-page', title: 'List Page', type: 'link' },
      // { path: '/pages/create-page', title: 'Create Page', type: 'link' },
      // ]
      // },
      {
      title: 'About Us', icon: 'clipboard', type: 'sub', active: false, children: [
      { path: '/pages/list-page', title: 'About Us', type: 'link' },
      // { path: '/pages/create-page', title: 'Create Page', type: 'link' },
      ]
      },
      // {
      // 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