added option to update multiple service states at once

minor frontend improvements

src/app/_data/data.ts

@@ -8,6 +8,7 @@ export interface CurrentStatus {
 export interface Group {
   id: string;
   name: string;
+  url?: string;
   state: State;
   services: Service[];
 }
@@ -15,7 +16,7 @@ export interface Group {
 export interface Service {
   id: string;
   name: string;
-  url: string;
+  url?: string;
   state: State;
 }
 

src/app/status/status.component.html

@@ -1,14 +1,15 @@
 <mat-accordion [multi]="true">
   <mat-expansion-panel *ngFor="let group of groups" [expanded]="true">
     <mat-expansion-panel-header>
-      <mat-panel-title><i [class]="stateClasses[group.state]"></i> {{group.name}}</mat-panel-title>
-      <!--      <mat-panel-description>-->
-      <!--        <span class="text-capitalize">{{getGroupState(group.services)}}</span>-->
-      <!--      </mat-panel-description>-->
+      <mat-panel-title>
+        <i [class]="stateClasses[group.state]"></i>
+        <a *ngIf="group.url" class="name" [href]="group.url" target="_blank" (click)="$event.stopPropagation()">{{group.name}}</a>
+        <span *ngIf="!group.url">{{group.name}}</span>
+      </mat-panel-title>
     </mat-expansion-panel-header>
 
     <mat-list>
-      <a *ngFor="let service of group.services; last as last" mat-list-item [href]="service.url" target="_blank">
+      <a *ngFor="let service of group.services; last as last" mat-list-item [href]="service.url || group.url || '#'" target="_blank">
         <div matLine class="d-flex">
           <i [class]="stateClasses[service.state]"></i>
           <span class="text-truncate">{{service.name}}</span>

src/app/status/status.component.scss

@@ -13,6 +13,11 @@
 a {
   text-decoration: none;
   outline: none;
+  color: #ffffff;
+
+  &:hover.name, &:hover .name {
+    text-decoration: underline;
+  }
 }
 
 mat-panel-title {