@huntsman-cancer-institute/dashboard 17.9.1 → 17.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2518,129 +2518,129 @@ class DashboardComponent {
|
|
|
2518
2518
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DashboardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DashboardService }, { token: DashboardGlobalService }, { token: i2$1.DragulaService }, { token: i5.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2519
2519
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DashboardComponent, selector: "dashboard", host: { properties: { "class": "this.classList" } }, providers: [
|
|
2520
2520
|
DashboardService
|
|
2521
|
-
], viewQueries: [{ propertyName: "widgetConfigure", first: true, predicate: ["widgetConfigure"], descendants: true }, { propertyName: "widgetContainers", predicate: WidgetContainerComponent, descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
2522
|
-
<ng-template #confirmDialog let-c="close" let-d="dismiss">
|
|
2523
|
-
<div class="modal-header">
|
|
2524
|
-
<h5 class="modal-title">Delete</h5>
|
|
2525
|
-
</div>
|
|
2526
|
-
<div class="modal-body">
|
|
2527
|
-
<p>Are you sure?</p>
|
|
2528
|
-
</div>
|
|
2529
|
-
<div class="modal-footer">
|
|
2530
|
-
<button type="button" class="btn btn-primary" (click)="c('Yes')">Yes</button>
|
|
2531
|
-
<button type="button" class="btn btn-secondary" (click)="d('No')">No</button>
|
|
2532
|
-
</div>
|
|
2533
|
-
</ng-template>
|
|
2534
|
-
|
|
2535
|
-
<widget-add [dashboardIndex]="selectedIndex"></widget-add>
|
|
2536
|
-
|
|
2537
|
-
<div class="edit-mode-header"
|
|
2538
|
-
[@openEditModeHeader]="editMode"
|
|
2539
|
-
[@openEditModeHeaderDisplay]="editMode">
|
|
2540
|
-
<button class="btn btn-primary btn-space"
|
|
2541
|
-
(click)="addWidget()">
|
|
2542
|
-
<i class="fas fa-plus fa-2x"></i>
|
|
2543
|
-
<br />
|
|
2544
|
-
<span>Widget</span>
|
|
2545
|
-
</button>
|
|
2546
|
-
<button *ngIf="configMode === 'true'"
|
|
2547
|
-
class="btn btn-primary btn-space red"
|
|
2548
|
-
(click)="deleteWidget()">
|
|
2549
|
-
<i class="fas fa-times fa-2x"></i>
|
|
2550
|
-
<br />
|
|
2551
|
-
<span>Widget</span>
|
|
2552
|
-
</button>
|
|
2553
|
-
<button class="btn btn-primary btn-space"
|
|
2554
|
-
(click)="addDashboard()">
|
|
2555
|
-
<i class="fas fa-plus fa-2x"></i>
|
|
2556
|
-
<br />
|
|
2557
|
-
<span>Dashboard</span>
|
|
2558
|
-
</button>
|
|
2559
|
-
<button class="btn btn-primary btn-space red"
|
|
2560
|
-
*ngIf="dashboards.length > 1"
|
|
2561
|
-
(click)="deleteDashboard(confirmDialog)">
|
|
2562
|
-
<i class="fas fa-times fa-2x"></i>
|
|
2563
|
-
<br />
|
|
2564
|
-
<span>Dashboard</span>
|
|
2565
|
-
</button>
|
|
2566
|
-
<button class="btn btn-primary btn-space green"
|
|
2567
|
-
(click)="setEditMode(false)">
|
|
2568
|
-
<i class="fas fa-check fa-2x"></i>
|
|
2569
|
-
<br />
|
|
2570
|
-
<span>Done</span>
|
|
2571
|
-
</button>
|
|
2572
|
-
</div>
|
|
2573
|
-
|
|
2574
|
-
<div class="outlet-row">
|
|
2575
|
-
|
|
2576
|
-
<!-- Iterate over all dashboards. Show non selected dashboards off screen. -->
|
|
2577
|
-
<ng-template ngFor let-dashboard [ngForOf]="dashboards" let-dashboardIndex="index">
|
|
2578
|
-
<div class="d-flex"
|
|
2579
|
-
[style.left]="selectedIndex !== dashboardIndex ? '100vw' : 'inherit'"
|
|
2580
|
-
[style.position]="selectedIndex !== dashboardIndex ? 'fixed' : 'inherit'"
|
|
2581
|
-
[@openConfigContent]="configMode">
|
|
2582
|
-
<widget-container
|
|
2583
|
-
[dashboard]="dashboard"
|
|
2584
|
-
[dashboardIndex]="dashboardIndex">
|
|
2585
|
-
</widget-container>
|
|
2586
|
-
</div>
|
|
2587
|
-
</ng-template>
|
|
2588
|
-
|
|
2589
|
-
<div [style.display]="configMode === 'true' ? 'flex' : 'none'" class="sidebar-widget-config" [@openConfigSidebar]="configMode">
|
|
2590
|
-
<div class="outlet-column" style="background-color: white; height: 100%; padding: 2px;">
|
|
2591
|
-
<div class="d-flex flex-nowrap">
|
|
2592
|
-
<div><h4>Settings</h4></div>
|
|
2593
|
-
<div style="margin-right: 0px; margin-left: auto;">
|
|
2594
|
-
<span style="color: var(--pure-green);" (click)="saveConfiguration()">
|
|
2595
|
-
<i class="fas fa-check-circle fa-2x"></i>
|
|
2596
|
-
</span>
|
|
2597
|
-
<span style="color: var(--pure-red);" (click)="cancelConfiguration()">
|
|
2598
|
-
<i class="fas fa-times-circle fa-2x"></i>
|
|
2599
|
-
</span>
|
|
2600
|
-
</div>
|
|
2601
|
-
</div>
|
|
2602
|
-
<widget-configure #widgetConfigure></widget-configure>
|
|
2603
|
-
</div>
|
|
2604
|
-
</div>
|
|
2605
|
-
</div>
|
|
2606
|
-
|
|
2607
|
-
<ng-container *ngIf="dashboards?.length > 1">
|
|
2608
|
-
<div class="dashboard-nav-trigger">
|
|
2609
|
-
<span (mouseenter)="openDashboardNavState = 'opened'">
|
|
2610
|
-
<i class="fas fa-th fa-2x"></i>
|
|
2611
|
-
</span>
|
|
2612
|
-
</div>
|
|
2613
|
-
|
|
2614
|
-
<div class="dashboard-nav"
|
|
2615
|
-
[@openDashboardNav]="openDashboardNavState"
|
|
2616
|
-
[style.left]="'calc(50vw - ' + dashboards?.length * 50 + 'px)'"
|
|
2617
|
-
(mouseleave)="openDashboardNavState = 'closed'">
|
|
2618
|
-
<ng-container *ngFor="let dashboard of dashboards; index as i">
|
|
2619
|
-
<div [id]="'dash-image-' + i"
|
|
2620
|
-
class="widget-image"
|
|
2621
|
-
[ngClass]="i === selectedIndex ? 'selected' : ''"
|
|
2622
|
-
(click)="selectDashboard(i)">
|
|
2623
|
-
</div>
|
|
2624
|
-
</ng-container>
|
|
2625
|
-
</div>
|
|
2626
|
-
</ng-container>
|
|
2627
|
-
|
|
2628
|
-
<ng-container *ngIf="helpMode">
|
|
2629
|
-
<div id="helpParent">
|
|
2630
|
-
<div id="helpChild">
|
|
2631
|
-
<div style="width: 100%; display: inline-flex;">
|
|
2632
|
-
<h4>Help</h4>
|
|
2633
|
-
<span style="margin-right: 0; margin-left: auto; color: var(--pure-red);" (click)="setHelpMode(false)">
|
|
2634
|
-
<i class="fas fa-times fa-lg"></i>
|
|
2635
|
-
</span>
|
|
2636
|
-
</div>
|
|
2637
|
-
<div>
|
|
2638
|
-
The dashboard is a collection of widgets that you can customize to your own needs. In this edit mode, you
|
|
2639
|
-
can drag and drop widgets to change the order and double click a widget to change its configuration.
|
|
2640
|
-
</div>
|
|
2641
|
-
</div>
|
|
2642
|
-
</div>
|
|
2643
|
-
</ng-container>
|
|
2521
|
+
], viewQueries: [{ propertyName: "widgetConfigure", first: true, predicate: ["widgetConfigure"], descendants: true }, { propertyName: "widgetContainers", predicate: WidgetContainerComponent, descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
2522
|
+
<ng-template #confirmDialog let-c="close" let-d="dismiss">
|
|
2523
|
+
<div class="modal-header">
|
|
2524
|
+
<h5 class="modal-title">Delete</h5>
|
|
2525
|
+
</div>
|
|
2526
|
+
<div class="modal-body">
|
|
2527
|
+
<p>Are you sure?</p>
|
|
2528
|
+
</div>
|
|
2529
|
+
<div class="modal-footer">
|
|
2530
|
+
<button type="button" class="btn btn-primary" (click)="c('Yes')">Yes</button>
|
|
2531
|
+
<button type="button" class="btn btn-secondary" (click)="d('No')">No</button>
|
|
2532
|
+
</div>
|
|
2533
|
+
</ng-template>
|
|
2534
|
+
|
|
2535
|
+
<widget-add [dashboardIndex]="selectedIndex"></widget-add>
|
|
2536
|
+
|
|
2537
|
+
<div class="edit-mode-header"
|
|
2538
|
+
[@openEditModeHeader]="editMode"
|
|
2539
|
+
[@openEditModeHeaderDisplay]="editMode">
|
|
2540
|
+
<button class="btn btn-primary btn-space"
|
|
2541
|
+
(click)="addWidget()">
|
|
2542
|
+
<i class="fas fa-plus fa-2x"></i>
|
|
2543
|
+
<br />
|
|
2544
|
+
<span>Widget</span>
|
|
2545
|
+
</button>
|
|
2546
|
+
<button *ngIf="configMode === 'true'"
|
|
2547
|
+
class="btn btn-primary btn-space red"
|
|
2548
|
+
(click)="deleteWidget()">
|
|
2549
|
+
<i class="fas fa-times fa-2x"></i>
|
|
2550
|
+
<br />
|
|
2551
|
+
<span>Widget</span>
|
|
2552
|
+
</button>
|
|
2553
|
+
<button class="btn btn-primary btn-space"
|
|
2554
|
+
(click)="addDashboard()">
|
|
2555
|
+
<i class="fas fa-plus fa-2x"></i>
|
|
2556
|
+
<br />
|
|
2557
|
+
<span>Dashboard</span>
|
|
2558
|
+
</button>
|
|
2559
|
+
<button class="btn btn-primary btn-space red"
|
|
2560
|
+
*ngIf="dashboards.length > 1"
|
|
2561
|
+
(click)="deleteDashboard(confirmDialog)">
|
|
2562
|
+
<i class="fas fa-times fa-2x"></i>
|
|
2563
|
+
<br />
|
|
2564
|
+
<span>Dashboard</span>
|
|
2565
|
+
</button>
|
|
2566
|
+
<button class="btn btn-primary btn-space green"
|
|
2567
|
+
(click)="setEditMode(false)">
|
|
2568
|
+
<i class="fas fa-check fa-2x"></i>
|
|
2569
|
+
<br />
|
|
2570
|
+
<span>Done</span>
|
|
2571
|
+
</button>
|
|
2572
|
+
</div>
|
|
2573
|
+
|
|
2574
|
+
<div class="outlet-row">
|
|
2575
|
+
|
|
2576
|
+
<!-- Iterate over all dashboards. Show non selected dashboards off screen. -->
|
|
2577
|
+
<ng-template ngFor let-dashboard [ngForOf]="dashboards" let-dashboardIndex="index">
|
|
2578
|
+
<div class="d-flex"
|
|
2579
|
+
[style.left]="selectedIndex !== dashboardIndex ? '100vw' : 'inherit'"
|
|
2580
|
+
[style.position]="selectedIndex !== dashboardIndex ? 'fixed' : 'inherit'"
|
|
2581
|
+
[@openConfigContent]="configMode">
|
|
2582
|
+
<widget-container
|
|
2583
|
+
[dashboard]="dashboard"
|
|
2584
|
+
[dashboardIndex]="dashboardIndex">
|
|
2585
|
+
</widget-container>
|
|
2586
|
+
</div>
|
|
2587
|
+
</ng-template>
|
|
2588
|
+
|
|
2589
|
+
<div [style.display]="configMode === 'true' ? 'flex' : 'none'" class="sidebar-widget-config" [@openConfigSidebar]="configMode">
|
|
2590
|
+
<div class="outlet-column" style="background-color: white; height: 100%; padding: 2px;">
|
|
2591
|
+
<div class="d-flex flex-nowrap">
|
|
2592
|
+
<div><h4>Settings</h4></div>
|
|
2593
|
+
<div style="margin-right: 0px; margin-left: auto;">
|
|
2594
|
+
<span style="color: var(--pure-green);" (click)="saveConfiguration()">
|
|
2595
|
+
<i class="fas fa-check-circle fa-2x"></i>
|
|
2596
|
+
</span>
|
|
2597
|
+
<span style="color: var(--pure-red);" (click)="cancelConfiguration()">
|
|
2598
|
+
<i class="fas fa-times-circle fa-2x"></i>
|
|
2599
|
+
</span>
|
|
2600
|
+
</div>
|
|
2601
|
+
</div>
|
|
2602
|
+
<widget-configure #widgetConfigure></widget-configure>
|
|
2603
|
+
</div>
|
|
2604
|
+
</div>
|
|
2605
|
+
</div>
|
|
2606
|
+
|
|
2607
|
+
<ng-container *ngIf="dashboards?.length > 1">
|
|
2608
|
+
<div class="dashboard-nav-trigger">
|
|
2609
|
+
<span (mouseenter)="openDashboardNavState = 'opened'">
|
|
2610
|
+
<i class="fas fa-th fa-2x"></i>
|
|
2611
|
+
</span>
|
|
2612
|
+
</div>
|
|
2613
|
+
|
|
2614
|
+
<div class="dashboard-nav"
|
|
2615
|
+
[@openDashboardNav]="openDashboardNavState"
|
|
2616
|
+
[style.left]="'calc(50vw - ' + dashboards?.length * 50 + 'px)'"
|
|
2617
|
+
(mouseleave)="openDashboardNavState = 'closed'">
|
|
2618
|
+
<ng-container *ngFor="let dashboard of dashboards; index as i">
|
|
2619
|
+
<div [id]="'dash-image-' + i"
|
|
2620
|
+
class="widget-image"
|
|
2621
|
+
[ngClass]="i === selectedIndex ? 'selected' : ''"
|
|
2622
|
+
(click)="selectDashboard(i)">
|
|
2623
|
+
</div>
|
|
2624
|
+
</ng-container>
|
|
2625
|
+
</div>
|
|
2626
|
+
</ng-container>
|
|
2627
|
+
|
|
2628
|
+
<ng-container *ngIf="helpMode">
|
|
2629
|
+
<div id="helpParent">
|
|
2630
|
+
<div id="helpChild">
|
|
2631
|
+
<div style="width: 100%; display: inline-flex;">
|
|
2632
|
+
<h4>Help</h4>
|
|
2633
|
+
<span style="margin-right: 0; margin-left: auto; color: var(--pure-red);" (click)="setHelpMode(false)">
|
|
2634
|
+
<i class="fas fa-times fa-lg"></i>
|
|
2635
|
+
</span>
|
|
2636
|
+
</div>
|
|
2637
|
+
<div>
|
|
2638
|
+
The dashboard is a collection of widgets that you can customize to your own needs. In this edit mode, you
|
|
2639
|
+
can drag and drop widgets to change the order and double click a widget to change its configuration.
|
|
2640
|
+
</div>
|
|
2641
|
+
</div>
|
|
2642
|
+
</div>
|
|
2643
|
+
</ng-container>
|
|
2644
2644
|
`, isInline: true, styles: ["#helpParent{position:fixed;display:flex;width:100vw;height:100vh;left:0;top:0;z-index:999;background:#00000040}#helpChild{width:75%;height:75%;margin:auto;background:#fff;border-radius:25px;box-shadow:2px 2px #000;padding:20px}.sidebar-widget-config{background-color:#fdd;border-left:gray 1px solid;padding:10px 0 10px 10px;opacity:0;width:0%}.modal{background-color:#00000040}.edit-mode-header{border-bottom:black 1px dashed;padding-top:10px;padding-bottom:10px;z-index:10;background-color:#fff}.edit-mode-header button{padding:.2rem .5rem}.btn-space{margin-left:10px}.btn.green{background-color:green}.btn.red{background-color:red}.dashboard-nav-trigger{bottom:40px;position:fixed;z-index:100;display:inline-block;width:100%;text-align:center;padding-top:15px;background:#fff;background:linear-gradient(0deg,white,white,transparent)}.dashboard-nav{bottom:-150px;position:fixed;z-index:101;display:inline-block;background-color:#fff}.widget-image{display:inline-block;max-height:100px;height:100px;min-height:100px;max-width:100px;width:100px;min-width:100px;border:black 1px solid;vertical-align:bottom;overflow-y:hidden;overflow-x:hidden}.widget-image.selected{border:red 2px solid}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WidgetContainerComponent, selector: "widget-container", inputs: ["dashboard", "dashboardIndex"] }, { kind: "component", type: WidgetAddComponent, selector: "widget-add", inputs: ["dashboardIndex"] }, { kind: "component", type: WidgetConfigureComponent, selector: "widget-configure" }], animations: [
|
|
2645
2645
|
trigger("openConfigContent", [
|
|
2646
2646
|
state("false", style({
|
|
@@ -2712,129 +2712,129 @@ class DashboardComponent {
|
|
|
2712
2712
|
}
|
|
2713
2713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DashboardComponent, decorators: [{
|
|
2714
2714
|
type: Component,
|
|
2715
|
-
args: [{ selector: "dashboard", template: `
|
|
2716
|
-
<ng-template #confirmDialog let-c="close" let-d="dismiss">
|
|
2717
|
-
<div class="modal-header">
|
|
2718
|
-
<h5 class="modal-title">Delete</h5>
|
|
2719
|
-
</div>
|
|
2720
|
-
<div class="modal-body">
|
|
2721
|
-
<p>Are you sure?</p>
|
|
2722
|
-
</div>
|
|
2723
|
-
<div class="modal-footer">
|
|
2724
|
-
<button type="button" class="btn btn-primary" (click)="c('Yes')">Yes</button>
|
|
2725
|
-
<button type="button" class="btn btn-secondary" (click)="d('No')">No</button>
|
|
2726
|
-
</div>
|
|
2727
|
-
</ng-template>
|
|
2728
|
-
|
|
2729
|
-
<widget-add [dashboardIndex]="selectedIndex"></widget-add>
|
|
2730
|
-
|
|
2731
|
-
<div class="edit-mode-header"
|
|
2732
|
-
[@openEditModeHeader]="editMode"
|
|
2733
|
-
[@openEditModeHeaderDisplay]="editMode">
|
|
2734
|
-
<button class="btn btn-primary btn-space"
|
|
2735
|
-
(click)="addWidget()">
|
|
2736
|
-
<i class="fas fa-plus fa-2x"></i>
|
|
2737
|
-
<br />
|
|
2738
|
-
<span>Widget</span>
|
|
2739
|
-
</button>
|
|
2740
|
-
<button *ngIf="configMode === 'true'"
|
|
2741
|
-
class="btn btn-primary btn-space red"
|
|
2742
|
-
(click)="deleteWidget()">
|
|
2743
|
-
<i class="fas fa-times fa-2x"></i>
|
|
2744
|
-
<br />
|
|
2745
|
-
<span>Widget</span>
|
|
2746
|
-
</button>
|
|
2747
|
-
<button class="btn btn-primary btn-space"
|
|
2748
|
-
(click)="addDashboard()">
|
|
2749
|
-
<i class="fas fa-plus fa-2x"></i>
|
|
2750
|
-
<br />
|
|
2751
|
-
<span>Dashboard</span>
|
|
2752
|
-
</button>
|
|
2753
|
-
<button class="btn btn-primary btn-space red"
|
|
2754
|
-
*ngIf="dashboards.length > 1"
|
|
2755
|
-
(click)="deleteDashboard(confirmDialog)">
|
|
2756
|
-
<i class="fas fa-times fa-2x"></i>
|
|
2757
|
-
<br />
|
|
2758
|
-
<span>Dashboard</span>
|
|
2759
|
-
</button>
|
|
2760
|
-
<button class="btn btn-primary btn-space green"
|
|
2761
|
-
(click)="setEditMode(false)">
|
|
2762
|
-
<i class="fas fa-check fa-2x"></i>
|
|
2763
|
-
<br />
|
|
2764
|
-
<span>Done</span>
|
|
2765
|
-
</button>
|
|
2766
|
-
</div>
|
|
2767
|
-
|
|
2768
|
-
<div class="outlet-row">
|
|
2769
|
-
|
|
2770
|
-
<!-- Iterate over all dashboards. Show non selected dashboards off screen. -->
|
|
2771
|
-
<ng-template ngFor let-dashboard [ngForOf]="dashboards" let-dashboardIndex="index">
|
|
2772
|
-
<div class="d-flex"
|
|
2773
|
-
[style.left]="selectedIndex !== dashboardIndex ? '100vw' : 'inherit'"
|
|
2774
|
-
[style.position]="selectedIndex !== dashboardIndex ? 'fixed' : 'inherit'"
|
|
2775
|
-
[@openConfigContent]="configMode">
|
|
2776
|
-
<widget-container
|
|
2777
|
-
[dashboard]="dashboard"
|
|
2778
|
-
[dashboardIndex]="dashboardIndex">
|
|
2779
|
-
</widget-container>
|
|
2780
|
-
</div>
|
|
2781
|
-
</ng-template>
|
|
2782
|
-
|
|
2783
|
-
<div [style.display]="configMode === 'true' ? 'flex' : 'none'" class="sidebar-widget-config" [@openConfigSidebar]="configMode">
|
|
2784
|
-
<div class="outlet-column" style="background-color: white; height: 100%; padding: 2px;">
|
|
2785
|
-
<div class="d-flex flex-nowrap">
|
|
2786
|
-
<div><h4>Settings</h4></div>
|
|
2787
|
-
<div style="margin-right: 0px; margin-left: auto;">
|
|
2788
|
-
<span style="color: var(--pure-green);" (click)="saveConfiguration()">
|
|
2789
|
-
<i class="fas fa-check-circle fa-2x"></i>
|
|
2790
|
-
</span>
|
|
2791
|
-
<span style="color: var(--pure-red);" (click)="cancelConfiguration()">
|
|
2792
|
-
<i class="fas fa-times-circle fa-2x"></i>
|
|
2793
|
-
</span>
|
|
2794
|
-
</div>
|
|
2795
|
-
</div>
|
|
2796
|
-
<widget-configure #widgetConfigure></widget-configure>
|
|
2797
|
-
</div>
|
|
2798
|
-
</div>
|
|
2799
|
-
</div>
|
|
2800
|
-
|
|
2801
|
-
<ng-container *ngIf="dashboards?.length > 1">
|
|
2802
|
-
<div class="dashboard-nav-trigger">
|
|
2803
|
-
<span (mouseenter)="openDashboardNavState = 'opened'">
|
|
2804
|
-
<i class="fas fa-th fa-2x"></i>
|
|
2805
|
-
</span>
|
|
2806
|
-
</div>
|
|
2807
|
-
|
|
2808
|
-
<div class="dashboard-nav"
|
|
2809
|
-
[@openDashboardNav]="openDashboardNavState"
|
|
2810
|
-
[style.left]="'calc(50vw - ' + dashboards?.length * 50 + 'px)'"
|
|
2811
|
-
(mouseleave)="openDashboardNavState = 'closed'">
|
|
2812
|
-
<ng-container *ngFor="let dashboard of dashboards; index as i">
|
|
2813
|
-
<div [id]="'dash-image-' + i"
|
|
2814
|
-
class="widget-image"
|
|
2815
|
-
[ngClass]="i === selectedIndex ? 'selected' : ''"
|
|
2816
|
-
(click)="selectDashboard(i)">
|
|
2817
|
-
</div>
|
|
2818
|
-
</ng-container>
|
|
2819
|
-
</div>
|
|
2820
|
-
</ng-container>
|
|
2821
|
-
|
|
2822
|
-
<ng-container *ngIf="helpMode">
|
|
2823
|
-
<div id="helpParent">
|
|
2824
|
-
<div id="helpChild">
|
|
2825
|
-
<div style="width: 100%; display: inline-flex;">
|
|
2826
|
-
<h4>Help</h4>
|
|
2827
|
-
<span style="margin-right: 0; margin-left: auto; color: var(--pure-red);" (click)="setHelpMode(false)">
|
|
2828
|
-
<i class="fas fa-times fa-lg"></i>
|
|
2829
|
-
</span>
|
|
2830
|
-
</div>
|
|
2831
|
-
<div>
|
|
2832
|
-
The dashboard is a collection of widgets that you can customize to your own needs. In this edit mode, you
|
|
2833
|
-
can drag and drop widgets to change the order and double click a widget to change its configuration.
|
|
2834
|
-
</div>
|
|
2835
|
-
</div>
|
|
2836
|
-
</div>
|
|
2837
|
-
</ng-container>
|
|
2715
|
+
args: [{ selector: "dashboard", template: `
|
|
2716
|
+
<ng-template #confirmDialog let-c="close" let-d="dismiss">
|
|
2717
|
+
<div class="modal-header">
|
|
2718
|
+
<h5 class="modal-title">Delete</h5>
|
|
2719
|
+
</div>
|
|
2720
|
+
<div class="modal-body">
|
|
2721
|
+
<p>Are you sure?</p>
|
|
2722
|
+
</div>
|
|
2723
|
+
<div class="modal-footer">
|
|
2724
|
+
<button type="button" class="btn btn-primary" (click)="c('Yes')">Yes</button>
|
|
2725
|
+
<button type="button" class="btn btn-secondary" (click)="d('No')">No</button>
|
|
2726
|
+
</div>
|
|
2727
|
+
</ng-template>
|
|
2728
|
+
|
|
2729
|
+
<widget-add [dashboardIndex]="selectedIndex"></widget-add>
|
|
2730
|
+
|
|
2731
|
+
<div class="edit-mode-header"
|
|
2732
|
+
[@openEditModeHeader]="editMode"
|
|
2733
|
+
[@openEditModeHeaderDisplay]="editMode">
|
|
2734
|
+
<button class="btn btn-primary btn-space"
|
|
2735
|
+
(click)="addWidget()">
|
|
2736
|
+
<i class="fas fa-plus fa-2x"></i>
|
|
2737
|
+
<br />
|
|
2738
|
+
<span>Widget</span>
|
|
2739
|
+
</button>
|
|
2740
|
+
<button *ngIf="configMode === 'true'"
|
|
2741
|
+
class="btn btn-primary btn-space red"
|
|
2742
|
+
(click)="deleteWidget()">
|
|
2743
|
+
<i class="fas fa-times fa-2x"></i>
|
|
2744
|
+
<br />
|
|
2745
|
+
<span>Widget</span>
|
|
2746
|
+
</button>
|
|
2747
|
+
<button class="btn btn-primary btn-space"
|
|
2748
|
+
(click)="addDashboard()">
|
|
2749
|
+
<i class="fas fa-plus fa-2x"></i>
|
|
2750
|
+
<br />
|
|
2751
|
+
<span>Dashboard</span>
|
|
2752
|
+
</button>
|
|
2753
|
+
<button class="btn btn-primary btn-space red"
|
|
2754
|
+
*ngIf="dashboards.length > 1"
|
|
2755
|
+
(click)="deleteDashboard(confirmDialog)">
|
|
2756
|
+
<i class="fas fa-times fa-2x"></i>
|
|
2757
|
+
<br />
|
|
2758
|
+
<span>Dashboard</span>
|
|
2759
|
+
</button>
|
|
2760
|
+
<button class="btn btn-primary btn-space green"
|
|
2761
|
+
(click)="setEditMode(false)">
|
|
2762
|
+
<i class="fas fa-check fa-2x"></i>
|
|
2763
|
+
<br />
|
|
2764
|
+
<span>Done</span>
|
|
2765
|
+
</button>
|
|
2766
|
+
</div>
|
|
2767
|
+
|
|
2768
|
+
<div class="outlet-row">
|
|
2769
|
+
|
|
2770
|
+
<!-- Iterate over all dashboards. Show non selected dashboards off screen. -->
|
|
2771
|
+
<ng-template ngFor let-dashboard [ngForOf]="dashboards" let-dashboardIndex="index">
|
|
2772
|
+
<div class="d-flex"
|
|
2773
|
+
[style.left]="selectedIndex !== dashboardIndex ? '100vw' : 'inherit'"
|
|
2774
|
+
[style.position]="selectedIndex !== dashboardIndex ? 'fixed' : 'inherit'"
|
|
2775
|
+
[@openConfigContent]="configMode">
|
|
2776
|
+
<widget-container
|
|
2777
|
+
[dashboard]="dashboard"
|
|
2778
|
+
[dashboardIndex]="dashboardIndex">
|
|
2779
|
+
</widget-container>
|
|
2780
|
+
</div>
|
|
2781
|
+
</ng-template>
|
|
2782
|
+
|
|
2783
|
+
<div [style.display]="configMode === 'true' ? 'flex' : 'none'" class="sidebar-widget-config" [@openConfigSidebar]="configMode">
|
|
2784
|
+
<div class="outlet-column" style="background-color: white; height: 100%; padding: 2px;">
|
|
2785
|
+
<div class="d-flex flex-nowrap">
|
|
2786
|
+
<div><h4>Settings</h4></div>
|
|
2787
|
+
<div style="margin-right: 0px; margin-left: auto;">
|
|
2788
|
+
<span style="color: var(--pure-green);" (click)="saveConfiguration()">
|
|
2789
|
+
<i class="fas fa-check-circle fa-2x"></i>
|
|
2790
|
+
</span>
|
|
2791
|
+
<span style="color: var(--pure-red);" (click)="cancelConfiguration()">
|
|
2792
|
+
<i class="fas fa-times-circle fa-2x"></i>
|
|
2793
|
+
</span>
|
|
2794
|
+
</div>
|
|
2795
|
+
</div>
|
|
2796
|
+
<widget-configure #widgetConfigure></widget-configure>
|
|
2797
|
+
</div>
|
|
2798
|
+
</div>
|
|
2799
|
+
</div>
|
|
2800
|
+
|
|
2801
|
+
<ng-container *ngIf="dashboards?.length > 1">
|
|
2802
|
+
<div class="dashboard-nav-trigger">
|
|
2803
|
+
<span (mouseenter)="openDashboardNavState = 'opened'">
|
|
2804
|
+
<i class="fas fa-th fa-2x"></i>
|
|
2805
|
+
</span>
|
|
2806
|
+
</div>
|
|
2807
|
+
|
|
2808
|
+
<div class="dashboard-nav"
|
|
2809
|
+
[@openDashboardNav]="openDashboardNavState"
|
|
2810
|
+
[style.left]="'calc(50vw - ' + dashboards?.length * 50 + 'px)'"
|
|
2811
|
+
(mouseleave)="openDashboardNavState = 'closed'">
|
|
2812
|
+
<ng-container *ngFor="let dashboard of dashboards; index as i">
|
|
2813
|
+
<div [id]="'dash-image-' + i"
|
|
2814
|
+
class="widget-image"
|
|
2815
|
+
[ngClass]="i === selectedIndex ? 'selected' : ''"
|
|
2816
|
+
(click)="selectDashboard(i)">
|
|
2817
|
+
</div>
|
|
2818
|
+
</ng-container>
|
|
2819
|
+
</div>
|
|
2820
|
+
</ng-container>
|
|
2821
|
+
|
|
2822
|
+
<ng-container *ngIf="helpMode">
|
|
2823
|
+
<div id="helpParent">
|
|
2824
|
+
<div id="helpChild">
|
|
2825
|
+
<div style="width: 100%; display: inline-flex;">
|
|
2826
|
+
<h4>Help</h4>
|
|
2827
|
+
<span style="margin-right: 0; margin-left: auto; color: var(--pure-red);" (click)="setHelpMode(false)">
|
|
2828
|
+
<i class="fas fa-times fa-lg"></i>
|
|
2829
|
+
</span>
|
|
2830
|
+
</div>
|
|
2831
|
+
<div>
|
|
2832
|
+
The dashboard is a collection of widgets that you can customize to your own needs. In this edit mode, you
|
|
2833
|
+
can drag and drop widgets to change the order and double click a widget to change its configuration.
|
|
2834
|
+
</div>
|
|
2835
|
+
</div>
|
|
2836
|
+
</div>
|
|
2837
|
+
</ng-container>
|
|
2838
2838
|
`, animations: [
|
|
2839
2839
|
trigger("openConfigContent", [
|
|
2840
2840
|
state("false", style({
|