@c8y/apps/tutorial/list/list.component.html

Cumulocity IoT applications

<c8y-title>List example</c8y-title>

<c8y-action-bar-item itemClass="navbar-form">
  <div class="input-group input-group-search">
    <input
      title="{{ 'Filter' }}"
      type="search"
      class="form-control"
      placeholder="Filter…"
      (change)="setPipe($event.target.value)"
    />
    <span class="input-group-addon">
      <i c8yIcon="search"></i>
    </span>
  </div>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
  <a class="btn btn-link" (click)="stepperService.modalCreateDevice()">
    <i c8yIcon="plus-square"></i> {{ 'Create device' }}
  </a>
</c8y-action-bar-item>

<div class="row m-b-16">
  <div class="col-xs-6">
    <c8y-form-group>
      <c8y-typeahead
        [(ngModel)]="selected"
        placeholder="Select"
        (onSearch)="setPipe($event)"
        [required]="true"
      >
        <c8y-li
          *c8yFor="
            let device of devices;
            loadMore: 'auto';
            pipe: filterPipe;
            notFound: notFoundTemplate
          "
          class="p-l-8 p-r-8 c8y-list__item--link interact"
          (click)="selected = device; setPipe('')"
          [active]="selected === device"
        >
          <c8y-highlight [text]="device.name" [pattern]="pattern"></c8y-highlight>
          <c8y-li-icon icon="rocket"></c8y-li-icon>
        </c8y-li>
        <ng-template #notFoundTemplate>
          <c8y-li class="bg-gray-lighter p-8" *ngIf="pattern.length > 0">
            <span>No match found.</span>
            <button type="button" class="btn btn-primary btn-xs m-l-16">
              Create new
            </button>
          </c8y-li>
        </ng-template>
      </c8y-typeahead>
    </c8y-form-group>
  </div>
  <div class="col-xs-6">
    <ng-container *ngIf="selected.id">
      Selected: {{ selected.name }}, ID: {{ selected.id }}
    </ng-container>
  </div>
</div>

<div class="m-b-16">
  {{ 'Create new device' }}:
  <input #deviceName />
  <button type="button" (click)="addDevice(deviceName.value)">
    <i [c8yIcon]="'plus-circle'"></i>
  </button>
</div>

<div class="row">
  <div class="col-xs-6">
    
    <c8y-list-group>
      <c8y-li-timeline
        *c8yFor="
          let device of devices;
          let i = index;
          pipe: filterPipe;
          notFound: this.pattern ? resetFilter : undefined
        "
      >
        {{ device.creationTime | date }}
        <c8y-li>
          <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>
          <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
          {{ i + 1 }}. {{ device.name || '-' }}
          <c8y-li-footer>
            Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
            {{ device.creationTime }}
          </c8y-li-footer>

          <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
            Delete
          </c8y-li-action>
          <c8y-li-action (click)="(false)" icon="rocket">
            Launch to space
          </c8y-li-action>
        </c8y-li>
      </c8y-li-timeline>
    </c8y-list-group>

    <ng-template #resetFilter>
      <c8y-li class="p-8 text-center">
        <p>
          <span>No more entries found for filter:</span>&nbsp;<strong>{{ pattern }}</strong>
        </p>

        <button class="btn btn-primary btn-xs m-t-8" (click)="pattern = ''; setPipe('')">
          Reset filter
        </button>
      </c8y-li>
    </ng-template>
  </div>
  <div class="col-xs-6">
    <c8y-list-group>
      <c8y-li>
        <c8y-li-checkbox (onSelect)="checkAll = $event"></c8y-li-checkbox>
        <label>All devices</label>
      </c8y-li>
      <c8y-li
        *c8yFor="let device of devices; loadMore: 'show'"
        #li
      >
        <c8y-li-checkbox
          [selected]="checkAll"
          (onSelect)="updateSelected($event, device)"
          (click)="$event.stopPropagation()"
        ></c8y-li-checkbox>
        <c8y-li-icon [icon]="'file'"></c8y-li-icon>
        <button class="btn-clean" (click)="li.collapsed = !li.collapsed">
          {{ device.name || '-' }}
        </button>
        <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
          Delete
        </c8y-li-action>
        <c8y-li-collapse>
          id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
        </c8y-li-collapse>
      </c8y-li>
    </c8y-list-group>
  </div>
</div>