fix some styling and view bugs,fix device filtering in devlogs

src/app/app.component.ts

@@ -23,7 +23,6 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log(this.router.url);
     this.router.events.subscribe((evt) => {
       if (!(evt instanceof NavigationEnd)) {
         return;

src/app/containers/default-layout/default-layout.component.html

@@ -37,9 +37,9 @@
 <!--main-->
 <div class="wrapper d-flex flex-column min-vh-100 bg-light dark:bg-transparent">
   <!--app-header-->
-  <app-default-header (UserModalEvent)="show_user_modal()" class="mb-4 d-print-none header header-sticky" position="sticky" sidebarId="sidebar" />
+  <app-default-header (UserModalEvent)="show_user_modal()" class="mb-2 d-print-none header header-sticky" position="sticky" sidebarId="sidebar" />
   <!--app-body-->
-  <div class="body flex-grow-1 px-3">
+  <div class="main-container body flex-grow-1 px-3" style="display: flex;">
     <c-container breakpoint="fluid" class="h-auto">
       <router-outlet />
     </c-container>

src/app/containers/default-layout/default-layout.component.scss

@@ -9,4 +9,15 @@
   --cui-sidebar-nav-title-margin-top: 0.1rem;
 
   }
+  .header{
+  --cui-subheader-min-height:2rem;
+  }
+
+}
+::ng-deep .card{
+  --cui-card-border-radius:0.2rem;
+  --cui-card-cap-padding-y:0.4rem;
+}
+::ng-deep :root{
+  --cui-body-font-size:0.8rem;
 }

src/app/containers/default-layout/default-layout.component.ts

@@ -113,11 +113,14 @@ export class DefaultLayoutComponent implements OnInit {
       _self.navItems=_self.navItems.filter((item:any) => {
         if (item.attributes){
           if('free' in item.attributes && _self.ispro){
-            //do nothing
+            return ;
           }
           else if('pro' in item.attributes && _self.ispro){
             return item;
           }
+          else if('pro' in item.attributes && !_self.ispro){
+            return ;
+          }
           else
             return item;
       }

src/app/views/acc_log/acc.component.scss

@@ -44,6 +44,17 @@ border: 1px solid #dfdfdf!important;
 padding: 1rem!important;
 }
 
+.gui-row-detail > div{
+  height:100%;
+}
+.gui-row-detail .log-detail{
+  height:100%;
+}
+
+.gui-structure{
+  min-height: 550px;
+}
+
 .log-detail code{
   padding:5px!important;
   display:block;

src/app/views/acc_log/acc.component.ts

@@ -85,7 +85,7 @@ export class AccComponent implements OnInit {
     enabled: true,
     template: (item) => {
       return `
-			<div class='log-detail'>
+			<div class='log-detail' style="width: 355px;">
 				<h1>${item.name}</h1>
 				<small>${item.devip}</small>
 				<table>

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

@@ -120,12 +120,12 @@
         </form>
       </c-col>
     </c-row>
-    <c-chart [data]="chart_data" [options]="options" [height]="200" type="line">
+    <c-chart [data]="chart_data" [options]="options" [height]="250" type="line">
     </c-chart>
   </c-card-body>
 </c-card>
 <c-row>
-  <c-col xl="6" *ngIf="stats" lg="12" class="h-100">
+  <c-col xl="6" *ngIf="stats" lg="12" class="h-100" style="height: 160px!important;">
     <c-widget-stat-b [title]="stats['version']" class="mb-1 h-100" value="Version">
       <div class="my-1">
         <code style="padding: 0!important;">Serial:</code> <small
@@ -146,7 +146,7 @@
     </c-widget-stat-b>
   </c-col>
 
-  <c-col xl="6" lg="12" class="h-100">
+  <c-col xl="6" lg="12" class="h-100" style="height: 160px!important;">
     <c-card class="mb-1 p-1 h-100" *ngIf="stats">
       <c-carousel [dark]="true" [animate]="false" [wrap]="false" [interval]="1000000">
         <c-carousel-indicators></c-carousel-indicators>

src/app/views/dashboard/dashboard.component.ts

@@ -5,10 +5,10 @@ import { loginChecker } from "../../providers/login_checker";
 import { Router } from "@angular/router";
 import { formatInTimeZone } from "date-fns-tz";
 
-
 @Component({
   templateUrl: "dashboard.component.html",
 })
+
 export class DashboardComponent implements OnInit {
   public uid: number;
   public uname: string;

src/app/views/device_logs/devlogs.component.html

@@ -119,9 +119,14 @@
                 Fixed</c-badge>
             </ng-template>
           </gui-grid-column>
-          <gui-grid-column header="eventtime" width='200' field="eventtime">
+          <gui-grid-column header="eventtime" width='220' field="eventtime">
             <ng-template let-value="item.eventtime" let-item="item" let-index="index">
-              {{ value }}
+              <div *ngIf="item.fixtime" class="fixed_time"><span><c-badge *ngIf="item.status==true" color="danger" style="font-size: 0.65em!important;padding: 3px 5px;" size="sm"
+                shape="rounded-pill">Event</c-badge> {{value}}</span><span>
+                <c-badge *ngIf="item.status==true" color="success" style="font-size: 0.65em!important;padding: 3px 5px;" size="sm"
+                  shape="rounded-pill">Fixed</c-badge> {{item.fixtime}}</span>
+              </div>
+              <div *ngIf="!item.fixtime">  {{ value }}</div>
             </ng-template>
           </gui-grid-column>
           <gui-grid-column header="Device" width='200' field="name">

src/app/views/device_logs/devlogs.component.scss

@@ -106,6 +106,12 @@ padding: 0.5rem!important;
 }
 
 
+.fixed_time{
+  display:flex;
+  flex-direction: column-reverse;
+  padding: 1px 0px;
+}
+
 .example-form {
   @include mat.button-density(-5);
 

src/app/views/device_logs/devlogs.component.ts

@@ -88,7 +88,7 @@ export class DevLogsComponent implements OnInit {
     enabled: true,
     template: (item) => { 
       return `
-			<div class='log-detail' style="color:#fff;background-color:${(() => {
+			<div class='log-detail' style="width: 355px;color:#fff;background-color:${(() => {
         if (item.level == "Critical") return "#e55353";
         else if (item.level == "Warning") return "#f9b115";
         else item.level == "Info";
@@ -223,6 +223,12 @@ export class DevLogsComponent implements OnInit {
           _self.tz,
           "yyyy-MM-dd HH:mm:ss XXX"
         );
+        if (d.fixtime)
+          d.fixtime = formatInTimeZone(
+            d.fixtime.split(".")[0] + ".000Z",
+            _self.tz,
+            "yyyy-MM-dd HH:mm:ss XXX"
+          );
         index += 1;
         return d;
       });

src/app/views/settings/settings.component.html

@@ -190,7 +190,7 @@
           <label cFormCheckLabel>Safe Update</label>
           <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
             * Download and install reqired firmware before installing the target firmware . for example it will install
-            latest 7.12 then upgrade to newer version >7.13</c-form-feedback>
+            latest 7.12 then upgrade to newer version >7.13 or install Required packages before update</c-form-feedback>
         </c-form-check>
         <button cButton color="primary" (click)="saveSysSetting()">Save</button>
 

src/app/views/settings/settings.component.ts

@@ -28,6 +28,7 @@ import { TimeZones } from "./timezones-data";
   styleUrls: ["settings.component.scss"],
   encapsulation: ViewEncapsulation.None,
 })
+
 export class SettingsComponent implements OnInit {
   public uid: number;
   public uname: string;
@@ -65,6 +66,7 @@ export class SettingsComponent implements OnInit {
       return value !== undefined && value !== null && value !== "";
     }
   }
+
   @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
 
   public source: Array<any> = [];

src/app/views/syslog/syslog.component.ts

@@ -81,7 +81,7 @@ export class SyslogComponent implements OnInit {
     enabled: true,
     template: (item) => {
       return `
-			<div class='log-detail' style="color:#fff;background-color:#3399ff">
+			<div class='log-detail' style="width: 355px;color:#fff;background-color:#3399ff">
 			<h2>System Log :</h2>
 			<table>
 				<tr>

src/scss/_custom.scss

@@ -92,19 +92,6 @@ pre {
     background: transparent!important;
     padding: 0!important;
   }
-  table,
-  tbody,
-  tr,
-  td {
-    background: inherit!important;
-  }
-  
-  table {
-    border-collapse: separate!important;
-    border-spacing: 0!important;
-    background: inherit!important;
-  }
-  
   /* for block of numbers */
   td.hljs-ln-numbers {
     position: sticky!important;
@@ -123,3 +110,7 @@ pre {
     padding-left: 10px !important;
   }
   
+
+  .gui-structure, .gui-structure *{
+    font-size: inherit!important;
+  }