feat: adjust layout for alarms and events in datapoints graph

SoftwareAG · May 21, 2024 · b96a95e · b96a95e
1 parent 7be91d3
commit b96a95e
Show file tree

Hide file tree

Showing 12 changed files with 238 additions and 98 deletions.
diff --git a/...arm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.html b/...arm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.html
@@ -1,41 +1,45 @@
 <div [formGroup]="formGroup">
   <c8y-form-group>
-    <label translate>Label</label>
-    <input
-      class="form-control"
-      name="label"
-      formControlName="label"
-      [placeholder]="
-        'e.g. {{ example }}'
-          | translate
-            : {
-                example:
-                  timelineType === 'ALARM'
-                    ? 'c8y_UnavailabilityAlarm'
-                    : 'c8y_LocationUpdate'
-              }
-      "
-    />
-  </c8y-form-group>
-
-  <div formGroupName="filters">
-    <c8y-form-group>
-      <label translate>Type</label>
+    <div class="d-flex a-i-center gap-8">
+      <label class="m-0" translate>Label</label>
       <input
-        class="form-control"
-        name="type"
-        formControlName="type"
+        class="form-control flex-grow"
+        name="label"
+        formControlName="label"
         [placeholder]="
           'e.g. {{ example }}'
             | translate
               : {
                   example:
                     timelineType === 'ALARM'
-                      ? 'c8y_UnavailabilityAlarm'
-                      : 'c8y_LocationUpdate'
+                      ? 'Alarm unavailable'
+                      : 'Location update'
                 }
         "
       />
+    </div>
+  </c8y-form-group>
+
+  <div formGroupName="filters">
+    <c8y-form-group>
+      <div class="d-flex a-i-center gap-8">
+        <label class="m-0" translate>Type</label>
+        <input
+          class="form-control flex-grow"
+          name="type"
+          formControlName="type"
+          [placeholder]="
+            'e.g. {{ example }}'
+              | translate
+                : {
+                    example:
+                      timelineType === 'ALARM'
+                        ? 'c8y_UnavailabilityAlarm'
+                        : 'c8y_LocationUpdate'
+                  }
+          "
+        />
+      </div>
     </c8y-form-group>
   </div>
 </div>
diff --git a/...alarm-event-selector/alarm-event-selection-list/alarm-event-selection-list.component.html b/...alarm-event-selector/alarm-event-selection-list/alarm-event-selection-list.component.html
@@ -44,7 +44,7 @@
   </div>
 </c8y-list-group>
 
-<div class="card-footer bg-inherit">
+<div class="card-footer bg-inherit separator-bottom">
   <button
     [title]="timelineTypeTexts.addButtonLabel | translate"
     type="button"

diff --git a/...ent-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.html b/...ent-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.html
@@ -39,13 +39,21 @@
       class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0"
       [title]="'Change color' | translate"
     >
-      <div class="c8y-colorpicker">
+      <div
+        class="c8y-colorpicker"
+        [ngClass]="{
+          'c8y-colorpicker--alarm': timelineType === 'ALARM',
+          'c8y-colorpicker--event': timelineType === 'EVENT'
+        }"
+      >
         <input
           type="color"
           formControlName="color"
           (click)="$event.stopPropagation()"
         />
-        <span [style.background-color]="formGroup.value.color"></span>
+        <span [style.background-color]="formGroup.value.color">
+          <i [c8yIcon]="timelineType === 'EVENT' ? 'c8y-events' : 'bell'"></i>
+        </span>
       </div>
     </div>
     <button
@@ -70,6 +78,7 @@
     </button>
 
     <button
+      title="{{ 'Invalid entries' | translate }}"
       class="btn-clean m-l-auto"
       *ngIf="(valid$ | async) === false && li.collapsed"
       [popover]="
@@ -79,7 +88,7 @@
       container="body"
       [outsideClick]="true"
     >
-      <i class="text-danger" c8yIcon="warning"></i>
+      <i class="text-danger" c8yIcon="exclamation-circle"></i>
     </button>
   </div>
 

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.html b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.html
@@ -90,27 +90,6 @@ <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
               </ng-template>
             </span>
           </div>
-
-          <div
-            class="dropdown m-r-4"
-            dropdown
-            #dropdown="bs-dropdown"
-            container="body"
-            [insideClick]="true"
-          >
-            <button class="btn btn-default" dropdownToggle>
-              {{ timelineTypeTexts.addCustomItemButtonLabel | translate }}
-            </button>
-
-            <div *dropdownMenu class="dropdown-menu p-16">
-              <c8y-custom-alarm-event-form
-                [timelineType]="timelineType"
-                [target]="assetSelection | async"
-                (added)="itemAdded($event); dropdown.isOpen = false"
-                (cancel)="dropdown.isOpen = false"
-              ></c8y-custom-alarm-event-form>
-            </div>
-          </div>
         </div>
       </div>
 
@@ -119,15 +98,43 @@ <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
       >
         <ng-container *ngIf="!loadingItems; else loadingData">
           <ng-container *ngIf="items$ | async as items">
-            <div *ngIf="items.length">
-              <p>
-                <strong>{{
-                  timelineTypeTexts.recentItemsWarningTitle | translate
-                }}</strong>
-              </p>
-              <small>{{
-                timelineTypeTexts.recentItemsWarningText | translate
-              }}</small>
+            <div class="p-16 bg-level-2 bg-gray-white separator-bottom">
+              <div *ngIf="items.length">
+                <p>
+                  <i c8yIcon="info-circle" class="text-info m-r-4"></i>
+                  <strong>{{
+                    timelineTypeTexts.recentItemsWarningTitle | translate
+                  }}</strong>
+                </p>
+                <p>
+                  {{ timelineTypeTexts.recentItemsWarningText | translate }}
+                  {{ timelineTypeTexts.addCustomText | translate }}
+                </p>
+              </div>
+              <div [ngClass]="{ 'p-t-16': items.length }">
+                <button
+                  class="btn btn-default btn-sm"
+                  aria-controls="collapseCustomItemForm"
+                  [attr.aria-expanded]="isExpanded"
+                  (click)="isExpanded = !isExpanded"
+                >
+                  {{ timelineTypeTexts.addCustomItemButtonLabel | translate }}
+                </button>
+                <div
+                  class="collapse"
+                  id="collapseCustomItemForm"
+                  [collapse]="!isExpanded"
+                  [isAnimated]="true"
+                >
+                  <c8y-custom-alarm-event-form
+                    [timelineType]="timelineType"
+                    [target]="assetSelection | async"
+                    (added)="itemAdded($event); isExpanded = false"
+                    (cancel)="isExpanded = false"
+                    class="d-block separator-top"
+                  ></c8y-custom-alarm-event-form>
+                </div>
+              </div>
             </div>
 
             <div class="p-16" *ngIf="!filteredItems.length">
@@ -185,20 +192,26 @@ <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
     </p>
     <div class="d-flex flex-wrap gap-8 p-l-16 p-r-16 p-b-16">
       <div
-        class="c8y-datapoint-pill"
+        [ngClass]="{
+          'c8y-alarm-pill': timelineType === 'ALARM',
+          'c8y-event-pill': timelineType === 'EVENT'
+        }"
         *ngFor="let selectedItem of selectedItems"
       >
         <button
           [title]="'Remove' | translate"
           type="button"
-          class="c8y-datapoint-pill__btn"
+          [ngClass]="{
+            'c8y-alarm-pill__btn': timelineType === 'ALARM',
+            'c8y-event-pill__btn': timelineType === 'EVENT'
+          }"
           (click)="itemRemoved(selectedItem)"
         >
           <i c8yIcon="remove" class="icon-14"></i>
         </button>
         <div class="c8y-datapoint-pill__label" [title]="selectedItem.label">
           <i
-            c8yIcon="circle"
+            [c8yIcon]="timelineType === 'ALARM' ? 'bell' : 'c8y-events'"
             class="m-r-4 icon-14"
             [style.color]="selectedItem.color"
           ></i>

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.ts b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.ts
@@ -23,7 +23,6 @@ import {
   TimelineTypeTexts,
 } from './alarm-event-selector.model';
 import { AlarmEventSelectorService } from './alarm-event-selector.service';
-import { ColorService } from '@c8y/ngx-components';
 import { AssetSelectionChangeEvent } from '@c8y/ngx-components/assets-navigator';
 
 @Component({
@@ -54,6 +53,7 @@ export class AlarmEventSelectorComponent implements OnInit {
   filterStringChanges$: Observable<string>;
   timelineTypeTexts: TimelineTypeTexts;
   private filterString$ = new BehaviorSubject('');
+  isExpanded = false;
 
   constructor(private alarmEventSelectorService: AlarmEventSelectorService) {}
 

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts
@@ -1,5 +1,4 @@
 import { IIdentified } from '@c8y/client';
-import { gettext } from '@c8y/ngx-components';
 import { AlarmEventSelectorModalComponent } from './alarm-event-selector-modal/alarm-event-selector-modal.component';
 
 export type TimelineType = 'ALARM' | 'EVENT';
@@ -57,4 +56,5 @@ export type TimelineTypeTexts = {
   noSelectedItemsTitle: string;
   recentItemsWarningTitle: string;
   recentItemsWarningText: string;
+  addCustomText: string;
 };
diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.module.ts b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.module.ts
@@ -5,12 +5,12 @@ import { CoreModule } from '@c8y/ngx-components';
 import { AlarmEventSelectorListItemComponent } from './alarm-event-selector-list-item/alarm-event-selector-list-item.component';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { AlarmEventAttributesFormComponent } from './alarm-event-attributes-form/alarm-event-attributes-form.component';
 import { AlarmEventSelectorModalComponent } from './alarm-event-selector-modal/alarm-event-selector-modal.component';
 import { AlarmEventSelectorComponent } from './alarm-event-selector.component';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { IncludesAlarmOrEventPipe } from './pipes/includes-alarm.pipe';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { CustomAlarmEventFormComponent } from './custom-alarm-event-form/custom-alarm-event-form.component';
 
 @NgModule({
@@ -20,7 +20,7 @@ import { CustomAlarmEventFormComponent } from './custom-alarm-event-form/custom-
     PopoverModule,
     TooltipModule,
     AssetSelectorModule,
-    BsDropdownModule,
+    CollapseModule,
   ],
   declarations: [
     AlarmEventSelectionListComponent,

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.service.ts b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.service.ts
@@ -47,12 +47,11 @@ export class AlarmEventSelectorService {
         ),
         selectedItemsTitle: gettext('Selected alarms'),
         noSelectedItemsTitle: gettext('No alarms selected.'),
-        recentItemsWarningTitle: gettext(
-          'List below might not be complete list of alarms'
-        ),
+        recentItemsWarningTitle: gettext('The list below may not be complete.'),
         recentItemsWarningText: gettext(
-          'Alarms displayed below are recent alarms. Other alarms might occur in the past.'
+          'Recent alarms are displayed below. Past alarms might not be shown.'
         ),
+        addCustomText: gettext('Optionally you can add a custom alarm.'),
       };
     }
     return {
@@ -72,12 +71,11 @@ export class AlarmEventSelectorService {
       ),
       selectedItemsTitle: gettext('Selected events'),
       noSelectedItemsTitle: gettext('No events selected.'),
-      recentItemsWarningTitle: gettext(
-        'List below might not be complete list of events'
-      ),
+      recentItemsWarningTitle: gettext('The list below may not be complete.'),
       recentItemsWarningText: gettext(
-        'Events displayed below are recent events. Other events might occur in the past.'
+        'Recent events are displayed below. Past events might not be shown..'
       ),
+      addCustomText: gettext('Optionally you can add a custom event.'),
     };
   }
 

diff --git a/...graph/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.html b/...graph/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.html
@@ -1,36 +1,37 @@
-<form [formGroup]="formGroup">
+<form [formGroup]="formGroup" class="p-16">
   <div
-    class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0"
+    class="form-group d-flex a-i-center gap-8"
     [title]="'Change color' | translate"
   >
-    <label translate>Color</label>
-    <div class="c8y-colorpicker">
+    <label class="m-0" translate>Color</label>
+    <div class="c8y-colorpicker c8y-colorpicker--alarm">
       <input
         type="color"
         formControlName="color"
         (click)="$event.stopPropagation()"
       />
-      <span [style.background-color]="formGroup.value.color"></span>
+      <span [style.background-color]="formGroup.value.color">
+        <i [c8yIcon]="timelineType === 'EVENT' ? 'c8y-events' : 'bell'"></i>
+      </span>
     </div>
   </div>
 
-  <div class="data-point-details">
-    <c8y-alarm-event-attributes-form
-      formControlName="details"
-      [timelineType]="timelineType"
-    ></c8y-alarm-event-attributes-form>
-  </div>
+  <c8y-alarm-event-attributes-form
+    formControlName="details"
+    [timelineType]="timelineType"
+  ></c8y-alarm-event-attributes-form>
 
-  <div class="d-flex">
-    <button class="btn btn-default" (click)="cancel.emit()">
+  <div class="d-flex p-t-16">
+    <button class="btn btn-default btn-sm" (click)="cancel.emit()">
       {{ 'Cancel' | translate }}
     </button>
     <button
-      class="btn btn-default"
+      class="btn btn-primary btn-sm"
       [disabled]="(valid$ | async) === false"
       (click)="add()"
     >
-      {{ 'Add' | translate }}
+      <i c8yIcon="plus-circle"></i>
+      {{ 'Select' | translate }}
     </button>
   </div>
 </form>