mikrofront/src/app/views/dashboard/dashboard.component.html

<c-row>
  <c-col xs>
    <c-card class="mb-1">
      <c-card-header>Past 24 Hour Statics</c-card-header>
      <c-card-body>
        <c-row>
          <c-col md="12" xl="12" xs="12">
            <c-row *ngIf="!stats">
              <c-col class="mb-sm-1 mb-0" *ngFor="let item of [1,2,3,4,5]">
                <c-card class="mb-1">
                  <c-card-body>
                    <div class="placeholder-glow">
                      <div class="placeholder col-3 mb-2" style="height: 40px;"></div>
                      <div class="placeholder col-6"></div>
                    </div>
                  </c-card-body>
                </c-card>
              </c-col>
            </c-row>
            <c-row *ngIf="stats">
              <c-col class="mb-sm-1 mb-0">
                <c-widget-stat-f [title]="'Failed Logins'" class="mb-1" color="danger" padding
                  value="{{stats['FailedLogins']}}">
                  <ng-template cTemplateId="widgetIconTemplate">
                    <i style="font-size: 2em;" class="fa-solid fa-person-circle-exclamation"></i>
                  </ng-template>
                </c-widget-stat-f>
              </c-col>
              <c-col class="mb-sm-1 mb-0">
                <c-widget-stat-f [title]="'Success Logins'" class="mb-1" color="success" padding
                  value="{{stats['SuccessfulLogins']}}">
                  <ng-template cTemplateId="widgetIconTemplate">
                    <i style="font-size: 2em;" class="fa-solid fa-arrow-right-to-bracket"></i>
                  </ng-template>
                </c-widget-stat-f>
              </c-col>
              <c-col class="mb-sm-1 mb-0">
                <c-widget-stat-f [title]="'Critical Events'" class="mb-1" color="danger" padding
                  value="{{stats['Critical']}}">
                  <ng-template cTemplateId="widgetIconTemplate">
                    <i style="font-size: 2em;" class="fa-solid fa-skull-crossbones"></i>
                  </ng-template>
                </c-widget-stat-f>
              </c-col>
              <c-col class="mb-sm-1 mb-0">
                <c-widget-stat-f [title]="'Warning Events'" class="mb-1" color="warning" padding
                  value="{{stats['Warning']}}">
                  <ng-template cTemplateId="widgetIconTemplate">
                    <i style="font-size: 2em;" class="fa-solid fa-triangle-exclamation"></i>
                  </ng-template>
                </c-widget-stat-f>
              </c-col>
              <c-col class="mb-sm-1 mb-0">
                <c-widget-stat-f [title]="'Info Events'" class="mb-1" color="info" padding value="{{stats['Info']}}">
                  <ng-template cTemplateId="widgetIconTemplate">
                    <i style="font-size: 2em;" class="fa-solid fa-circle-info"></i>
                  </ng-template>
                </c-widget-stat-f>
              </c-col>
            </c-row>
          </c-col>
        </c-row>
      </c-card-body>
      <c-card-footer class="pb-0">
        <c-col xs>
          <c-row>
            <c-col md="12" xl="12" xs="12">
              <c-row *ngIf="!stats">
                <c-col class="mb-0 pb-0" *ngFor="let item of [1,2,3,4,5]">
                  <div class="border-start border-start-4 border-start-info pt-1 px-3 mb-1">
                    <div class="placeholder-glow">
                      <div class="placeholder col-8"></div>
                      <div class="placeholder col-6"></div>
                    </div>
                  </div>
                </c-col>
              </c-row>
              <c-row *ngIf="stats">
                <c-col class="mb-0 pb-0">
                  <div class="border-start border-start-4 border-start-info pt-1 px-3 mb-1">
                    <div class="text-medium-emphasis small">Total users</div>
                    <div class="fs-6 fw-semibold">{{stats['Users']}}</div>
                  </div>
                </c-col>
                <c-col class="mb-0 pb-0">
                  <div class="border-start border-start-4 border-start-warning pt-1 px-3 mb-1">
                    <div class="text-medium-emphasis small">Total Devices</div>
                    <div class="fs-6 fw-semibold">{{stats['Devices']}}</div>
                  </div>
                </c-col>
                <c-col class="mb-0 pb-0">
                  <div class="border-start border-start-4 border-start-success pt-1 px-3 mb-1">
                    <div class="text-medium-emphasis small">Total Events</div>
                    <div class="fs-6 fw-semibold">{{stats['Events']}}</div>
                  </div>
                </c-col>
                <c-col class="mb-0 pb-0">
                  <div class="border-start border-start-4 border-start-success pt-1 px-3 mb-1">
                    <div class="text-medium-emphasis small">Total Auth Logs</div>
                    <div class="fs-6 fw-semibold">{{stats['Auth']}}</div>
                  </div>
                </c-col>
                <c-col class="mb-0 pb-0">
                  <div class="border-start border-start-4 border-start-success pt-1 px-3 mb-1">
                    <div class="text-medium-emphasis small">Total Acc Logs</div>
                    <div class="fs-6 fw-semibold">{{stats['Acc']}}</div>
                  </div>
                </c-col>
              </c-row>
            </c-col>
          </c-row>
        </c-col>
      </c-card-footer>
    </c-card>
  </c-col>
</c-row>

<c-card class="mb-1">
  <c-card-body>
    <c-row>
      <c-col sm="5">
        <h4 class="card-title mb-0" id="traffic">Total Devices Traffic</h4>
      </c-col>
      <c-col class="d-none d-md-block" sm="7">
        <form [formGroup]="trafficRadioGroup">
          <c-button-group class="float-end me-3" role="group">
            <input class="btn-check" formControlName="trafficRadio" type="radio" value="5m" />
            <label (click)="setTrafficPeriod('5m')" cButton cFormCheckLabel color="secondary" variant="outline">5
              Minues</label>

            <input class="btn-check" formControlName="trafficRadio" type="radio" value="1h" />
            <label (click)="setTrafficPeriod('1h')" cButton cFormCheckLabel color="secondary"
              variant="outline">Hourly</label>

            <input class="btn-check" formControlName="trafficRadio" type="radio" value="daily" />
            <label (click)="setTrafficPeriod('daily')" cButton cFormCheckLabel color="secondary"
              variant="outline">Daily</label>
            <input class="btn-check" formControlName="trafficRadio" type="radio" value="live" />
            <label (click)="setTrafficPeriod('live')" cButton cFormCheckLabel color="secondary"
              variant="outline">Live</label>
          </c-button-group>
        </form>
      </c-col>
    </c-row>
    <div *ngIf="!chart_data.datasets" style="height: 250px;">
      <div class="placeholder-glow" style="height: 100%;">
        <div class="placeholder col-12" style="height: 250px;"></div>
      </div>
    </div>
    <c-chart *ngIf="chart_data.datasets" [data]="chart_data" [options]="options" [height]="250" type="line">
    </c-chart>
  </c-card-body>
</c-card>
<c-row>
  <c-col xl="6" lg="12" class="h-100" style="min-height: 160px!important;display: grid">
    <c-card class="mb-1 p-1 h-100" style="padding-left: 5px!important;">
      <div class="my-1">
        <h4 style="display: inline-block;">Version and Serial information</h4>
      </div>
      <div *ngIf="!stats">
        <div class="placeholder-glow">
          <div class="placeholder col-8"></div>
          <div class="placeholder col-6"></div>
          <div class="placeholder col-10"></div>
          <div class="placeholder col-7"></div>
        </div>
      </div>
      <div *ngIf="!stats['license']" class="my-1">
        <div style="display: inline-block;margin-right: 5px;">
          <code style="padding: 0!important;">Serial:</code> <small
            style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
            [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
          <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success"><i
              class="fa-solid fa-check"></i>Copy</span>
        </div>
        <c-badge *ngIf="stats['username']" color="danger">Not Registred</c-badge>
        <c-badge *ngIf="!stats['username']" color="danger">License Validation failed</c-badge>
      </div>
      <div *ngIf="stats['license']=='connection_error'" class="my-1">
        <div style="display: inline-block;margin-right: 5px;">
          <code style="padding: 0!important;">Serial:</code> <small
            style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
            [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
          <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
              class="fa-solid fa-check"></i>Copy</span>
        </div>
        <c-badge class="mx-1" color="danger">Unable connect to server/Check server internet connection</c-badge>
      </div>
      <div *ngIf="stats['license']!='connection_error' && stats['license']" class="my-1">
        <div style="display: inline-block;margin-right: 5px;">
          <code style="padding: 0!important;">Serial:</code> <small
            style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
            [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
          <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
              class="fa-solid fa-check"></i>Copy</span>
        </div>
        <c-badge color="success">Registred</c-badge>
        <c-badge class="mx-1" color="info">License Type : {{stats['license']}}</c-badge>
        <c-badge *ngIf="stats['update_mode']!='auto'" color="info">Manual update</c-badge>
        <c-badge *ngIf="stats['update_mode']=='auto'" color="info">Auto update</c-badge>
      </div>
      <div *ngIf="stats['license']!='connection_error'" class="my-1">
        <span style="font-size: 0.9rem; display: inline-block;margin-right: 5px"><c-badge
            [color]="stats['update_available'] ? 'success' : 'secondary'"
            style="margin: 0!important;padding: 8px;height: 27px;">Your Mikroman version : {{stats['version']}}
          </c-badge>
          <i class="fa-solid fa-spinner fa-spin" *ngIf="stats['update_inprogress']"></i>
          <button cButton color="warning"
            *ngIf="stats['update_mode']!='auto' && stats['update_available'] && !stats['update_inprogress']" size="sm"
            (click)="showConfirmModal('update_mikroman')"
            style="font-size: 0.75em;position: relative;left: -4px;top: 1px;border-top-left-radius: 0;border-bottom-left-radius: 0;height: 27px;"><i
              class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
        </span>
        <span style="font-size: 0.9rem; display: inline-block;"><c-badge
            [color]="stats['front_update_available'] ? 'success' : 'secondary'" style="padding: 8px;height: 27px;"
            color="secondary">Your Mikrofront version : {{front_version}}
          </c-badge>
          <i class="fa-solid fa-spinner fa-spin" *ngIf="stats['front_update_inprogress']"></i>
          <button cButton color="warning"
            *ngIf="stats['update_mode']!='auto' && stats['front_update_available'] && !stats['front_update_inprogress']"
            size="sm" (click)="showConfirmModal('update_mikrofront')"
            style="font-size: 0.75em;position: relative;left: -4px;top: 1px;border-top-left-radius: 0;border-bottom-left-radius: 0;height: 27px;"><i
              class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
        </span>
      </div>
      <p  *ngIf="!stats['license'] && !stats['username']" style="color: rgb(0, 119, 255);"><strong>License User name is not set in settings <a style="color: rgb(0, 119, 255);" target="_blank" href="https://mikrowizard.com/docs/register-serial-number/" >read more!</a></strong></p>
      <p  *ngIf="!stats['license'] &&  stats['username']" style="color: rgb(0, 119, 255);"><strong>Serial number not submited<a style="color: rgb(0, 119, 255);" target="_blank" href="https://mikrowizard.com/docs/register-serial-number/" >read more!</a></strong> </p>

      <!-- <div *ngIf="stats['update_mode']!='auto'" class="my-1">
        <button cButton color="warning" *ngIf="stats['update_available']" size="sm" style="font-size: 1em;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>Mikroman</strong> and reload server</button>
        <button cButton color="warning" *ngIf="stats['front_update_available']" size="sm" style="font-size: 1em;margin-left: 5px;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>MikroFront</strong> and reload Page</button>
      </div> -->
    </c-card>
  </c-col>
  <c-col xl="6" lg="12" class="h-100" style="min-height: 160px!important;display: grid;">
    <c-card class="h-100" style="padding: 0!important;margin: 0!important;">
      <div *ngIf="!stats" style="padding: 20px;">
        <div class="placeholder-glow">
          <div class="placeholder col-4" style="height: 150px; float: left; margin-right: 20px;"></div>
          <div class="placeholder col-7">
            <div class="placeholder col-12"></div>
            <div class="placeholder col-10"></div>
            <div class="placeholder col-8"></div>
          </div>
        </div>
      </div>
      <c-carousel *ngIf="stats" [dark]="true" [animate]="false" [wrap]="false" [interval]="1000000">
        <c-carousel-indicators></c-carousel-indicators>
        <c-carousel-inner>
          <c-carousel-item style="display: flex;" *ngFor="let slide of stats['blog']; index as i;">
            <img [src]="slide.media_content" alt="{{slide.title}}" class="d-block" loading="lazy" style=" float: left;"
              height="150px" />
            <div style="padding: 20px;">
              <h5>{{slide.title}}</h5>
              <p style="max-width: 90%;" [innerHTML]="slide.summery"></p>
            </div>
          </c-carousel-item>
        </c-carousel-inner>
        <c-carousel-control [routerLink] caption="Previous" direction="prev"></c-carousel-control>
        <c-carousel-control [routerLink] caption="Next" direction="next"></c-carousel-control>
      </c-carousel>
    </c-card>
  </c-col>
</c-row>

<c-modal #ConfirmModal backdrop="static" size="lg" [(visible)]="ConfirmModalVisible" id="ConfirmModal">
  <c-modal-header>
    <h5 cModalTitle *ngIf="action=='update_mikroman'">Please Confirm Mikroman Update</h5>
    <h5 cModalTitle *ngIf="action=='update_mikrofront'">Please Confirm MikroFront Update</h5>
    <button [cModalToggle]="ConfirmModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>
    <div *ngIf="action=='update_mikroman'">
      <p>Are you sure you want to apply latest Mikroman Update <code
          style="padding: 0 !important;"><b> ver {{ stats['latest_version'] }}</b></code>?</p>
      <p>By updating Mikroman the MikroFront update is also get checked and applyed</p>
      <p>If you made any special changes to configuration files or python files it will be removed automaticlaly</p>
    </div>
    <div *ngIf="action=='update_mikroman'">
      <code style="padding: 0!important;">Applying the update will cause reload of the server couple of times</code>
    </div>
    <div *ngIf="action=='update_mikrofront'">
      <p>Are you sure you want to apply latest MikroFront Update <code
          style="padding: 0 !important;"><b> ver {{ stats['front_latest_version'] }}</b></code>?</p>
    </div>
    <div *ngIf="action=='update_mikrofront'">
      <code style="padding: 0!important;">Applying the update will cause reload of the page,<br>
        Also please make sure you have the latest Mikroman before updating MikroFront. 
        Updating to latest MikroFront without getting latest Mikroman can cause problems</code>
    </div>
  </c-modal-body>
  <c-modal-footer>
    <button cButton (click)="ConfirmAction()" color="primary"> submit</button>
    <button [cModalToggle]="ConfirmModal.id" cButton color="secondary">
      Close
    </button>
  </c-modal-footer>
</c-modal>