Merge branch 'features/logs'

Tiledesk · Dec 22, 2023 · f9516a5 · f9516a5
2 parents d2855da + 9446de9
commit f9516a5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/src/app/automations/automations.component.html b/src/app/automations/automations.component.html
@@ -31,6 +31,12 @@
               Reload</button>
           </div>
 
+          <div *ngIf="transactions.length === 0" class="no-automations">
+            <span class="material-icons-outlined automation-icon">hdr_auto</span>
+            <p>You haven't created any automation yet.</p>
+            <!-- <a>Create one now</a> -->
+          </div>
+
           <div class="automation-list">
 
             <div class="automation" *ngFor="let transaction of transactions"
@@ -86,31 +92,31 @@
             <p class="subtitle">Automation Stats</p>
 
             <div class="stats">
-              <span class="stat"> 
-                <span class="material-icons-round counter-icon complete">done_all</span> 
-                <label>Read:</label> <span>{{ read_count }}</span> 
+              <span class="stat">
+                <span class="material-icons-round counter-icon complete">done_all</span>
+                <label>Read:</label> <span>{{ read_count }}</span>
               </span>
               <span class="stat">
-                <span class="material-icons-round counter-icon pending">done_all</span> 
+                <span class="material-icons-round counter-icon pending">done_all</span>
                 <label>Delivered:</label> {{ delivered_count }}
               </span>
               <span class="stat">
-                <span class="material-icons-round counter-icon pending">done</span> 
+                <span class="material-icons-round counter-icon pending">done</span>
                 <label>Sent:</label> {{ sent_count }}
               </span>
               <span class="stat">
-                <span class="material-icons-round counter-icon pending">schedule</span> 
+                <span class="material-icons-round counter-icon pending">schedule</span>
                 <label>Accepted:</label> {{ accepted_count }}
               </span>
               <span class="stat">
-                <span class="material-icons-round counter-icon error">error_outline</span> 
+                <span class="material-icons-round counter-icon error">error_outline</span>
                 <label>Rejected:</label> {{ failed_count }}
               </span>
               <span class="stat">
-                <span class="material-icons-round counter-icon error">error_outline</span> 
+                <span class="material-icons-round counter-icon error">error_outline</span>
                 <label>Failed:</label> {{ rejected_count }}
               </span>
-            </div>            
+            </div>
 
           </div>
 
@@ -122,7 +128,7 @@ <h4>{{ logs.length }} Messages</h4>
           </div>
 
           <div class="logs-list">
-         
+
             <mat-expansion-panel *ngFor="let log of logs" style="border-radius: 0px;">
               <mat-expansion-panel-header>
                 <mat-panel-title>

diff --git a/src/app/automations/automations.component.scss b/src/app/automations/automations.component.scss
@@ -1,7 +1,7 @@
 @import "../../assets/sass/md/_variables.scss";
 
 .card-content {
-    font-family:'Poppins','Roboto', 'Arial', sans-serif !important;
+    font-family: 'Poppins', 'Roboto', 'Arial', sans-serif !important;
 }
 
 label {
@@ -22,8 +22,8 @@ p {
 }
 
 .header {
-    display: flex; 
-    justify-content: space-between; 
+    display: flex;
+    justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     align-items: flex-end;
@@ -34,6 +34,24 @@ p {
     }
 }
 
+.no-automations {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 80px;
+
+    .material-icons-outlined {
+        font-size: 60px;
+        color: #3c48588c;
+        margin-bottom: 20px;
+    }
+
+    p {
+        font-size: 18px;
+    }
+
+}
+
 .automation-option {
     display: flex;
     align-items: center;
@@ -206,7 +224,7 @@ p {
 // }
 
 // .reload-button {
-    
+
 //     margin-left: 12px;
 //     font-size: 12px;
 //     background-color: transparent;
@@ -264,22 +282,22 @@ p {
     .complete {
         color: #70bbe7;
         background-color: white;
-    border-radius: 12px;
-    padding: 4px;
+        border-radius: 12px;
+        padding: 4px;
     }
 
     .pending {
         color: #cbcbcb;
         background-color: white;
-    border-radius: 12px;
-    padding: 4px;
+        border-radius: 12px;
+        padding: 4px;
     }
 
     .error {
         color: #bd1515;
         background-color: white;
-    border-radius: 12px;
-    padding: 4px;
+        border-radius: 12px;
+        padding: 4px;
     }
 }