DVR-Frontend/src/app/home/home.component.html

<div class="container-fluid p-lg-0 p-sm-0 p-md-0">
  <dvr-header></dvr-header>
</div>




<div class="wrapper d-flex align-items-stretch">
  <nav id="sidebar" style="background:#f0ebeb;box-shadow:4px 6px 13px #d1cece">

    <ul class="list-unstyled components mb-5">
      <li class="active" style="text-align:center;background: #d9d5d5">
        <a routerLink="/home"><span class="fa fa-home "></span>
          <p style="font-size:15px;margin-bottom: 0px;"> Home</p>
        </a>
      </li>
      <li style="text-align:center">
        <a routerLink="/contactDetails"><span class="fa fa-user "></span>

          <p style="font-size:15px;margin-bottom: 0px;">Contact</p>
        </a>
      </li>
      <li style="text-align:center;">
        <a routerLink="/dvrentry"><span class="fa fa-file-text "></span>
          <p style="font-size:15px;margin-bottom: 0px;"> DVR Entry</p>
        </a>
      </li>
      <li style="text-align:center" *ngIf="role_check == 'admin'">
        <a routerLink="/customer"><span class="fa fa-user "></span>
          <p style="font-size:15px;margin-bottom: 0px;">Customer</p>
        </a>
      </li>
    </ul>
  </nav>

  <div id="content" class="p-4 p-md-5 pt-5">

    <!-- admin div -->
    <div class="col-lg-12  panelcss"  style="padding-right:10px;padding-left:10px">
      <div class="col-lg-12 row mobilepadding">
        <div class="smm smm1">
          <div class="w3-black pull-left">
            <button class="w3-bar-item w3-button tablink {{add_css}}" (click)="searchDvr('0')">Last week</button>
            <button class="w3-bar-item w3-button tablink {{add_css1}}" (click)="searchDvr('1')">Last month</button>
            <button class="w3-bar-item w3-button tablink {{add_css2}}" (click)="searchDvr('2')">Last year</button>
          </div>
        </div>
        <div class="smm smm4">
          <div class="pull-right smm2 col-lg-12 row">
            <!-- <div class="col-lg-0"></div> -->
            <div class="col-lg-3" style="margin-bottom:6px;margin-bottom:6px">


              <select id='saleperson'  name='saleperson' [(ngModel)]="sale_person"
                class="form-control" placeholder="Sales Person">

                <option class="dropdown-item"  selected value="undefined">Sales Person</option>

                <option *ngFor="let item of datalist?.[0]" [value]="item.first_name+ ' '+item.last_name">
                  {{item.first_name}} {{item.last_name}}
                </option>
              </select>


            </div>

            <div class="col-lg-3" style="margin-bottom:6px;margin-bottom:6px">


              <select id="customer"  name='customer' class="form-control" [(ngModel)]="customer"
                placeholder="Customer">
                <option class="dropdown-item" selected value="undefined">Customers</option>

                <option *ngFor="let cust of cust_data" [ngValue]="cust">
                  {{ cust.customer_name }}

                </option>
              </select>


            </div>

            <div class="col-lg-3" style="display:flex;margin-bottom:6px">
              <label for="startDate" style="font-size: medium;margin-right: 10px;font-weight:lighter;">From:</label>
              <input type="date" id="startDate" name="startDate" [(ngModel)]="startDate" style="border-radius: 4px;border: 1px solid hsl(214, 7%, 81%);height: 40px;font-size: 13px;padding: 10px;">
            </div>
            <div class="col-lg-3" style="display:flex;margin-bottom:6px">
              <label for="endDate"
                style="font-size: medium;margin-right: 10px;margin-left: 10px;font-weight:lighter;">To:</label>
              <input type="date" id="endDate" name="endDate" [(ngModel)]="endDate" style="border-radius: 4px;
           border: 1px solid #cacdd1;height: 40px;font-size: 13px;padding: 10px;">
            </div>

          </div>
          <div class="row col-lg-12">
            <div class="col-lg-8">
            </div>
            <div class="col-lg-2" style="margin-top:9px">
              <input type="submit" class="submitbutton" style="margin-bottom: 6px;" value="Search" (click)="onSearch()">
            </div>
            <div class="col-lg-2" style="margin-top:9px">
              <input type="reset" class="cancelbutton" value="Clear" (click)="onClear()">
            </div>

          </div>
        </div>
      </div>


      <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':displayStyle}">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">{{status_msg}}</h4>

            </div>
            <div class="modal-body">
              <p>{{error_msg}}</p>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" (click)="closePopup()">
                Close
              </button>
            </div>
          </div>
        </div>
      </div>



      <div id="London" class="w3-container w3-border city">
        <div class="col-lg-12 row pt-3">
          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{no_of_visit}}</h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">No. of Visits</h6>

            </div>

          </div>

          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card1.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{no_contact}} </h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">No. of New Contacts </h6>

            </div>

          </div>

          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card2.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{com_entry}}</h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">Completed Entries</h6>

            </div>

          </div>


          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{incom_entry}}</h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">Incomplete Entries</h6>

            </div>

          </div>

        </div>


        <div class="col-lg-12" style="text-align:right">
          <div class="col-lg-12" style="text-align:right">
            <a routerLink="/dvrentry"> <span style="color: #cd1212;
                text-decoration: underline;font-size:14px">Create new visit report
              </span></a>

          </div>
        </div>
      </div>

    </div>
    <!-- admin div -->

    <!-- other users -->
    <!-- <div class="col-lg-12  panelcss" *ngIf="role_check=='users'" style="padding-right:10px;padding-left:10px">
      <div class="col-lg-12 row mobilepadding">
        <div class="smm smm1">
          <div class="w3-black pull-left">
            <button class="w3-bar-item w3-button tablink {{add_css}}" (click)="searchDvr('0')">Last week</button>
            <button class="w3-bar-item w3-button tablink {{add_css1}}" (click)="searchDvr('1')">Last month</button>
            <button class="w3-bar-item w3-button tablink {{add_css2}}" (click)="searchDvr('2')">Last year</button>
          </div>
        </div>
        <div class="smm smm4">
          <div class="pull-right smm2 col-lg-12 row">
            
         

            <div class="col-lg-2" style="margin-bottom:6px;padding:0px;margin-bottom:6px">


              <select id="customer" *ngIf="check_role==true" name='customer' class="form-control"  [(ngModel)]="customer" placeholder="Customer">
                <option class="dropdown-item" disabled selected value="undefined">Customers</option>

                <option *ngFor="let cust of cust_data" [ngValue]="cust">
                  {{ cust.customer_name }}

                </option>
              </select>


            </div>

            <div class="col-lg-3" style="display:flex;margin-bottom:6px">
              <label for="startDate" style="font-size: medium;margin-right: 10px;font-weight:lighter;">From:</label>
              <input type="date" id="startDate" name="startDate" [(ngModel)]="startDate" style="border-radius: 4px;
              border: 1px solid #cacdd1;height: 40px;font-size: 13px;padding: 10px;">
            </div>
            <div class="col-lg-3" style="display:flex;margin-bottom:6px">
              <label for="endDate"
                style="font-size: medium;margin-right: 10px;margin-left: 10px;font-weight:lighter;">To:</label>
              <input type="date" id="endDate" name="endDate" [(ngModel)]="endDate" style="border-radius: 4px;
               border: 1px solid #cacdd1;height: 40px;font-size: 13px;padding: 10px;">
            </div>
            <div class="col-lg-2">
              <input type="submit" class="submitbutton" style="margin-bottom: 6px;" value="Search" (click)="onSearch()">
            </div>
            <div class="col-lg-2">
              <input type="reset" class="cancelbutton" value="Clear" (click)="onClear()">
            </div>

          </div>
        </div>
      </div>



      <div id="London" class="w3-container w3-border city">
        <div class="col-lg-12 row pt-3">
          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{no_of_visit}}</h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">No. of Visits</h6>

            </div>

          </div>

          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card1.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{no_contact}} </h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">No. of New Contacts </h6>

            </div>

          </div>

          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card2.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{com_entry}}</h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">Completed Entries</h6>

            </div>

          </div>


          <div class="col-lg-3">
            <div class="card flex-wrap">
              <div class="col-lg-12 row padding0">
                <div class="col-lg-6 p-3">
                  <div class="card-header border-0">
                    <img src="assets/images/id-card.png" style="height:36px">
                  </div>
                </div>
                <div class="col-lg-6 p-3">

                  <div class="card-block mt-1">
                    <h6 class="card-number">{{incom_entry}}</h6>
                  </div>
                </div>

              </div>

              <h6 class="card-title">Incomplete Entries</h6>

            </div>

          </div>

        </div>


        <div class="col-lg-12" style="text-align:right">
          <div class="col-lg-12" style="text-align:right">
            <a routerLink="/dvrentry"> <span style="color: #cd1212;
                text-decoration: underline;font-size:14px">Create new visit report
              </span></a>

          </div>
        </div>
      </div>

    </div> -->
    <!-- other users -->

    <br>
    <br>
    <div class=" pt-4" style="padding-top: 20px !important;">
      <div class="col-lg-12 " style="    border: 1px solid #cbcbcb;
      padding: 10px;
      border-radius: 5px;overflow: auto;">
        <div *ngIf="dvrList">
          <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="dataTable row-border hover display"
            cellspacing="0" width="100%" style="border: 1px solid #ccc">
            <thead>
              <tr>

                <th style="width:15%">Customer Name</th>
                <th style="width:15%">Contact Name</th>
                <th style="width:15%">Date of Visit</th>
                <th style="width:15%">Physical Meeting</th>
                <th style="width:15%">Sales Person</th>

                <th style="width:40%;overflow:scroll">Message</th>

              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let dvrData of dvrList; let i = index">
                <!-- <td><a routerLink="/dvrentry/id:"+{{dvrData.customer_name}}+>{{dvrData.customer_name}}</a></td> -->
                <td> <a routerLink="/dvrentry/id:{{dvrData.dvr_id}}"> {{dvrData.customer_name}}</a></td>
                <td>{{dvrData.contact_name}}</td>
                <td>{{dvrData.date_of_visit | datePipe}}</td>
                <td>{{dvrData.physical_meeting | titlecase}}</td>
                <td>{{dvrData.sale_person}}</td>

                <td class="message-height">{{dvrData.message}}</td>
              </tr>
            </tbody>
          </table>

        </div>
      </div>
    </div>


  </div>

</div>


<style>
  @media (max-width: 1240px) {
    .smm {

      width: 100%;
      margin-bottom: 5px;
      padding-left: 0px;
    }

    .smm2 {

      width: 100%;
      margin-left: -20px;
      padding: 0px;
    }
  }

  @media (min-width: 1251px) {
    .smm1 {

      width: 25%;
      padding-left: 20px;

    }

    .smm4 {

      width: 75%;
    }
  }

  .message-height[_ngcontent-ils-c51] {
    height: 40px !important;
    display: block;
    overflow-y: auto;
    border: none;
  }
</style>