✨ Feature/count updates (#39)

* Adding an update counter on masonry cards * WIP Count updates + more * remove libs + fixes * Hide empty Group Name * Change Column Width inside a grouped holder * Release 0.3.1 * lint markdown * extract masonry options to inside masonry * fix test for good
senstate · Jun 27, 2020 · ade4f3b · ade4f3b
1 parent 5b480dd
commit ade4f3b
Show file tree

Hide file tree

Showing 30 changed files with 332 additions and 151 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,22 @@
 # Changelog
 
-## [0.3] - 2019-06-02
+## [0.3.1] - 25.06.2020
+
+### Added
+
+- Dashboard: Show Groups (List Mode) in columns + ability to select more columns
+- Dashboard: Show Watchers in Groups (List Mode) in columns + ability to select more columns
+- Dashboard: Save/Restore following settings, when using the same Browser (localStorage):
+  - Theme
+  - View Mode
+  - Masonry min-width
+- Dashboard: Add Update counter
+
+### Styling
+
+- Dashboard: Better styling List Mode
+
+## [0.3] - 2020-06-02
 
 ### Added
 

diff --git a/README.md b/README.md
@@ -28,10 +28,6 @@
 
 ![Senstate Current Workflow](readme_assets/senstate-current-workflow.svg)
 
-> Upcoming:
-
-![Senstate Current Workflow](readme_assets/senstate_upcoming_workflow.svg)
-
 ## Articles / Tutorial
 
 >[Introduction](https://dev.to/negue/senstate-make-sense-of-your-state-while-debugging-96f)
@@ -60,25 +56,23 @@ npx @senstate/cli
 | -------- | ----------------- | ----------------------- |
 | JS/TS    | [Repo][repo_js]   | [negue][user_negue]     |
 | C#       | [Repo][repo_csharp]   | [negue][user_negue]     |
-| Rust     | [Repo][repo_rust] | [dnaka91][user_dnaka91] |
-| Kotlin   | *(in progress)*   | [dnaka91][user_dnaka91] |
-| Go       | [Repo][repo_go]   | [dnaka91][user_dnaka91] |
+| Add yours| [Spec][SpecURL]    | |
 
 [repo_js]: https://github.com/senstate/platform/blob/master/libs/client/README.md
-[repo_rust]: https://github.com/dnaka91/senstate-rs
-[repo_go]: https://github.com/dnaka91/senstate-go
 [repo_csharp]: https://github.com/senstate/csharp-client
 
 [user_negue]: https://github.com/negue
-[user_dnaka91]: https://dnaka91.netlify.com
 
-All clients connect with web-sockets, here are the current [specs](api.spec.md).
+All clients connect with web-sockets, here are the current [specs][SpecURL].
+
+[SpecURL]: api.spec.md
 
 If you use the same static App-Id, you can keep the Watchers / Logger / Errors between App-restarts.
 
 ## TODO / In progress
 
 - more to come :)
+- idea? open an issue :)
 
 ## Show your support
 

diff --git a/apps/senstate-dashboard/src/app/app.component.html b/apps/senstate-dashboard/src/app/app.component.html
@@ -87,33 +87,23 @@
           </mat-card-title>
           <table class="center">
             <tr>
-              <td>
+              <td class="center">
                 <a href="https://github.com/senstate/csharp-client"
                    mat-raised-button color="primary" target="_blank">
                   C#
                 </a>
               </td>
-              <td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td class="center">
                 <a href="https://github.com/senstate/platform/blob/master/libs/client/README.md"
                    mat-raised-button color="primary" target="_blank">
                   JS
                 </a>
               </td>
-              <td>
-                <a href="https://github.com/dnaka91/senstate-rs"
-                   mat-raised-button color="primary" target="_blank">
-                  Rust
-                </a>
-              </td>
-              <td>
-                <a href="https://github.com/dnaka91/senstate-go"
-                   mat-raised-button color="primary" target="_blank">
-                  Go
-                </a>
-              </td>
             </tr>
             <tr>
-              <td colspan="4" style="text-align: center">
+              <td colspan="4" class="center">
                 Create your own Library for your needed Language: <br />
                 <a href="https://github.com/senstate/platform/blob/master/api.spec.md"
                    mat-raised-button color="primary" target="_blank">

diff --git a/apps/senstate-dashboard/src/app/app.component.scss b/apps/senstate-dashboard/src/app/app.component.scss
@@ -129,3 +129,17 @@ mat-toolbar {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+
+.center {
+  text-align: center;
+}
+
+::ng-deep {
+  .divider {
+    height: 1px;
+    background: white;
+    width: 100%;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.html b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.html
@@ -17,8 +17,7 @@ <h2 class="mat-h2" >
             matBadgeOverlap="false">Watchers</span>
     </ng-template>
 
-    <senstate-watchers-masonry [appId]="app.appId" *ngIf="layoutOption.value === 'masonry'"
-                               [autoSizeCards]="autoSizeActive">
+    <senstate-watchers-masonry [appId]="app.appId" *ngIf="layoutOption.value === 'masonry'">
     </senstate-watchers-masonry>
 
     <senstate-watchers-list *ngIf="layoutOption.value === 'list'"
@@ -63,12 +62,10 @@ <h2 class="mat-h2" >
       <mat-option value="list">List</mat-option>
     </mat-select>
     <ng-container *ngIf="layoutOption.value === 'masonry'">
-      <hr class="divider" />
-      <label>Card-Size</label>
-      <mat-checkbox (click)="toggleAutoSize()"
-                    [checked]="autoSizeActive">
-        Disable Max-Width
-      </mat-checkbox>
+
     </ng-container>
+
+    <dynamic-portal [key]="'view-options_'+app.appId">
+    </dynamic-portal>
   </div>
 </mde-popover>
diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.scss b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.scss
@@ -24,13 +24,7 @@
   padding: 15px
 }
 
-.divider {
-  height: 1px;
-  background: white;
-  width: 100%;
-margin-top: 5px;
-margin-bottom: 5px;
-}
+
 
 :host.disconnected {
   opacity: 0.5;

diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.ts b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input, OnInit} from '@angular/core';
 import {App} from "@senstate/dashboard-connection";
 import {Observable} from "rxjs";
 import {ErrorData, LogData} from "@senstate/client";
@@ -8,7 +8,6 @@ import {DebugToggleService} from "../../services/debug-toggle.service";
 import {SettingsService} from "../../services/settings.service";
 
 const SETTING_LIST_TYPE = 'list';
-const SETTING_MAX_WIDTH = 'masonry_disable_max_width';
 
 @Component({
   selector: 'senstate-app-overview',
@@ -23,7 +22,6 @@ export class AppOverviewComponent implements OnInit {
 
   public logs$: Observable<LogData[]>;
   public errors$: Observable<ErrorData[]>;
-  public autoSizeActive = false;
 
   public listType: string;
 
@@ -33,11 +31,9 @@ export class AppOverviewComponent implements OnInit {
   }
 
   constructor (private hub: HubService,
-               private cd: ChangeDetectorRef,
                private settings: SettingsService,
                public debugToggle: DebugToggleService) {
     this.listType = settings.loadSetting(SETTING_LIST_TYPE, 'list');
-    this.autoSizeActive = settings.loadSetting(SETTING_MAX_WIDTH, false);
   }
 
   ngOnInit () {
@@ -56,13 +52,6 @@ export class AppOverviewComponent implements OnInit {
     return `${Object.keys(obj).length}`;
   }
 
-  toggleAutoSize () {
-    this.autoSizeActive = !this.autoSizeActive;
-
-    this.settings.saveSetting(SETTING_MAX_WIDTH, this.autoSizeActive);
-    // this.cd.markForCheck();
-    this.cd.detectChanges();
-  }
 
   saveListType(newListType: any) {
     this.settings.saveSetting(SETTING_LIST_TYPE, newListType);

diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.module.ts b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.module.ts
@@ -17,33 +17,38 @@ import {MatSelectModule} from "@angular/material/select";
 import {MatDividerModule} from "@angular/material/divider";
 import {WatchersListModule} from "../tab-content/watchers-list/watchers-list.module";
 import {MatChipsModule} from "@angular/material/chips";
+import {DynamicPortalModule, PortalHubService} from "@gewd/ng-utils/dynamic-portal";
 
 
 @NgModule({
   declarations: [AppOverviewComponent],
   exports: [
     AppOverviewComponent
   ],
-  imports: [
-    CommonModule,
-    MatTabsModule,
-    MatBadgeModule,
-    WatchersMasonryModule,
-    LogViewerModule,
-    ErrorViewerModule,
-    MatButtonModule,
-    MatIconModule,
-    MatMenuModule,
-    MatCheckboxModule,
-    MatRadioModule,
-    MdePopoverModule,
-    MatOptionModule,
-    MatSelectModule,
-    MatDividerModule,
-    WatchersMasonryModule,
-    WatchersMasonryModule,
-    WatchersListModule,
-    MatChipsModule
+    imports: [
+        CommonModule,
+        MatTabsModule,
+        MatBadgeModule,
+        WatchersMasonryModule,
+        LogViewerModule,
+        ErrorViewerModule,
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        MatRadioModule,
+        MdePopoverModule,
+        MatOptionModule,
+        MatSelectModule,
+        MatDividerModule,
+        WatchersMasonryModule,
+        WatchersMasonryModule,
+        WatchersListModule,
+        MatChipsModule,
+        DynamicPortalModule
+    ],
+  providers: [
+    PortalHubService
   ]
 })
 export class AppOverviewModule { }
diff --git a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.html b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.html
@@ -1,5 +1,7 @@
-<div class="group-name">
+<div class="inner-padding">
+<div class="group-name" *ngIf="showGroupName">
   <ng-content select="[group_holder__name]"></ng-content>
 </div>
 
 <ng-content></ng-content>
+</div>
diff --git a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.scss b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.scss
@@ -1,8 +1,9 @@
 :host {
   display: block;
+  width: calc(var(--group-holder-width, 100) * 1%);
 
-  &:not(:first-of-type) {
-    margin-top: 0.5rem;
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
   }
 }
 
@@ -14,9 +15,14 @@
   width: 100%;
   display: block;
   margin-bottom: 0.5rem;
+  height: 1.3rem;
 
   &:empty {
-    display: none;
+    opacity: 0;
   }
 }
 
+.inner-padding {
+  margin: 5px;
+}
+
diff --git a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.ts b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
 
 @Component({
   selector: 'senstate-group-holder',
@@ -8,6 +8,9 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 })
 export class GroupHolderComponent implements OnInit {
 
+  @Input()
+  public showGroupName = false;
+
   constructor() { }
 
   ngOnInit() {

diff --git a/...state-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.html b/...state-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.html
@@ -1,23 +1,50 @@
-<ng-container *ngIf="watchers$ |async as watchers">
-  <h2 class="mat-h3" *ngIf="watchers.length === 0">
+<ng-container *ngIf="groupedWatchers$ |async as grouped">
+  <h2 class="mat-h3" *ngIf="grouped.length === 0">
     No watchers yet :)
   </h2>
 
-  <senstate-group-holder
-    *ngFor="let group of watchers; trackBy: trackByGroupFunc">
-    <b *ngIf="group.key && group.key !== 'undefined'"
-        group_holder__name>
-      {{group.key}} - Watchers: {{group.watchers.length}}
-    </b>
-
-    <div *ngFor="let tag of group.watchers; trackBy: trackByWatcherFunc"
-         [ngSwitch]="tag.type"
-         class="watcher-entry">
-      <code>{{ tag.tag }}:</code>
-      <i class="mat-small"
-       *ngIf="debugToggle.showDebugId$() | async">{{tag.watchId}}</i>
-      <br />
-      <senstate-list-json-value [watchId]="tag.watchId"></senstate-list-json-value>
-    </div>
-  </senstate-group-holder>
+  <div class="groups" [cssProps]="{'--group-holder-width': grouped.length > 1 ? groupedColumnWidth : 100 }">
+
+    <senstate-group-holder
+      *ngFor="let group of grouped; trackBy: trackByGroupFunc"
+      [showGroupName]="group.haveGroups">
+
+      <b *ngIf="group.hasName" group_holder__name>
+          {{group.key}} - Watchers: {{group.watchers.length}}
+      </b>
+
+      <div class="watcher-holder"
+           [cssProps]="{'--watcher-holder-width': group.watchers.length > 1 ? watcherColumnWidth : 100 }">
+        <div *ngFor="let tag of group.watchers; trackBy: trackByWatcherFunc"
+             [ngSwitch]="tag.type"
+             class="watcher-entry">
+          <code>{{ tag.tag }}:</code>
+          <i class="mat-small"
+           *ngIf="debugToggle.showDebugId$() | async">{{tag.watchId}}</i>
+          <br />
+          <senstate-list-json-value [watchId]="tag.watchId"></senstate-list-json-value>
+        </div>
+      </div>
+    </senstate-group-holder>
+
+  </div>
 </ng-container>
+
+<ng-template [dynamicPortalSource]="'view-options_'+appId">
+  <hr class="divider" />
+
+  <label>Grouped Width</label>
+  <mat-select [(value)]="groupedColumnWidth" >
+    <mat-option [value]="50">2 Columns</mat-option>
+    <mat-option [value]="33">3 Columns</mat-option>
+    <mat-option [value]="25">4 Columns</mat-option>
+  </mat-select>
+  <hr class="divider" />
+
+  <label>Watchers Width</label>
+  <mat-select [(value)]="watcherColumnWidth" >
+    <mat-option [value]="50">2 Columns</mat-option>
+    <mat-option [value]="33">3 Columns</mat-option>
+    <mat-option [value]="25">4 Columns</mat-option>
+  </mat-select>
+</ng-template>