quickpanel.component.html 1.88 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
<div class="body-2 p-6 bg-primary text-primary-contrast">
  <p>Today</p>
  <div class="display-1">{{ dayName }}</div>
  <div class="display-1">{{ date }}</div>
</div>

<mat-divider></mat-divider>

<mat-nav-list>
  <h3 matSubheader>UPCOMING EVENTS</h3>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Business Meeting</h4>
    <p matLine>In 16 Minutes, Meeting Room</p>
  </a>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Ask for Vacation</h4>
    <p matLine>12:00 PM</p>
  </a>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Dinner with Sophie</h4>
    <p matLine>18:30 PM</p>
  </a>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Deadline for Project X</h4>
    <p matLine>21:00 PM</p>
  </a>
  <mat-divider></mat-divider>
  <h3 matSubheader>TODO-LIST</h3>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Invite Jack to play golf</h4>
    <p matLine>Added: 6 hours ago</p>
  </a>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Get to know Angular more</h4>
    <p matLine>Added: 2 days ago</p>
  </a>
  <a [routerLink]="[]" mat-list-item>
    <h4 matLine>Configure that new router</h4>
    <p matLine>Added: 5 days ago</p>
  </a>
  <mat-divider></mat-divider>
  <h3 matSubheader>SERVER STATISTICS</h3>
</mat-nav-list>

<div class="vex-list-item" matRipple>
  <p>CPU Load (71% / 100%)</p>
  <p class="progress-bar">
    <mat-progress-bar
      color="primary"
      mode="determinate"
      value="71"></mat-progress-bar>
  </p>
</div>

<div class="vex-list-item" matRipple>
  <p>RAM Usage (6,175 MB / 16,384 MB)</p>
  <p class="progress-bar">
    <mat-progress-bar
      color="accent"
      mode="determinate"
      value="34"></mat-progress-bar>
  </p>
</div>

<div class="vex-list-item" matRipple>
  <p>CPU Temp (43° / 80°)</p>
  <p class="progress-bar">
    <mat-progress-bar
      color="warn"
      mode="determinate"
      value="54"></mat-progress-bar>
  </p>
</div>