mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-15 12:55:14 +00:00
59b7c4a70b
+ resposive fixes on apps + fixed: router animation breaks the perfect-scrollbar + updated the perfect-scrollbar version
832 lines
47 KiB
HTML
832 lines
47 KiB
HTML
<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row" perfect-scrollbar>
|
|
|
|
<md-sidenav-container>
|
|
|
|
<!-- CENTER -->
|
|
<div class="center" fxFlex perfect-scrollbar>
|
|
|
|
<!-- HEADER -->
|
|
<div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
|
|
|
|
<div fxLayout="row" fxLayoutAlign="space-between start">
|
|
|
|
<span class="mat-display-1 mb-0">Welcome back, John!</span>
|
|
|
|
<button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
|
|
<md-icon>menu</md-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div fxLayout="row">
|
|
|
|
<div class="selected-project">{{selectedProject.name}}</div>
|
|
|
|
<button md-icon-button class="project-selector" [mdMenuTriggerFor]="projectsMenu" aria-label="Select project">
|
|
<md-icon>more_horiz</md-icon>
|
|
</button>
|
|
|
|
<md-menu #projectsMenu="mdMenu">
|
|
<button md-menu-item *ngFor="let project of projects" (click)="selectedProject = project">
|
|
<span>{{project.name}}</span>
|
|
</button>
|
|
</md-menu>
|
|
</div>
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content">
|
|
|
|
<md-tab-group dynamicHeight>
|
|
|
|
<md-tab label="Home">
|
|
|
|
<div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap>
|
|
|
|
<!-- WIDGET 1 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<md-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
|
|
aria-label="Change range">
|
|
<md-option *ngFor="let range of widgets.widget1.ranges | keys"
|
|
[value]="range.key">
|
|
{{range.value}}
|
|
</md-option>
|
|
</md-select>
|
|
|
|
<button md-icon-button fuseWidgetToggle aria-label="more">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
|
<div class="light-blue-fg font-size-72 line-height-72">
|
|
{{widgets.widget1.data.count[widgets.widget1.currentRange]}}
|
|
</div>
|
|
<div class="h3 secondary-text font-weight-500">{{widgets.widget1.data.label}}</div>
|
|
</div>
|
|
|
|
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="h4 secondary-text text-truncate">{{widgets.widget1.data.extra.label}}:</span>
|
|
<span class="h4 ml-8">{{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
<!-- Back -->
|
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
|
<md-icon class="s-16">close</md-icon>
|
|
</button>
|
|
|
|
<div>
|
|
{{widgets.widget1.detail}}
|
|
</div>
|
|
</div>
|
|
<!-- / Back -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 1 -->
|
|
|
|
<!-- WIDGET 2 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h3">{{widgets.widget2.title}}</div>
|
|
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
|
<div class="red-fg font-size-72 line-height-72">
|
|
{{widgets.widget2.data.count}}
|
|
</div>
|
|
<div class="h3 secondary-text font-weight-500">{{widgets.widget2.data.label}}</div>
|
|
</div>
|
|
|
|
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="h4 secondary-text text-truncate">{{widgets.widget2.data.extra.label}}:</span>
|
|
<span class="h4 ml-8">{{widgets.widget2.data.extra.count}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
<!-- Back -->
|
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
|
<md-icon class="s-16">close</md-icon>
|
|
</button>
|
|
|
|
<div>
|
|
{{widgets.widget2.detail}}
|
|
</div>
|
|
</div>
|
|
<!-- / Back -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 2 -->
|
|
|
|
<!-- WIDGET 3 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h3">{{widgets.widget3.title}}</div>
|
|
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
|
<div class="orange-fg font-size-72 line-height-72">
|
|
{{widgets.widget3.data.count}}
|
|
</div>
|
|
<div class="h3 secondary-text font-weight-500">{{widgets.widget3.data.label}}</div>
|
|
</div>
|
|
|
|
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="h4 secondary-text text-truncate">{{widgets.widget3.data.extra.label}}:</span>
|
|
<span class="h4 ml-8">{{widgets.widget3.data.extra.count}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
<!-- Back -->
|
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
|
<md-icon class="s-16">close</md-icon>
|
|
</button>
|
|
|
|
<div>
|
|
{{widgets.widget3.detail}}
|
|
</div>
|
|
</div>
|
|
<!-- / Back -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 3 -->
|
|
|
|
<!-- WIDGET 4 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h3">{{widgets.widget4.title}}</div>
|
|
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
|
<div class="blue-grey-fg font-size-72 line-height-72">{{widgets.widget4.data.count}}
|
|
</div>
|
|
<div class="h3 secondary-text font-weight-500">{{widgets.widget4.data.label}}</div>
|
|
</div>
|
|
|
|
<div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="h4 secondary-text text-truncate">{{widgets.widget4.data.extra.label}}:</span>
|
|
<span class="h4 ml-8">{{widgets.widget4.data.extra.count}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
<!-- Back -->
|
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
|
<md-icon class="s-16">close</md-icon>
|
|
</button>
|
|
|
|
<div>
|
|
{{widgets.widget4.detail}}
|
|
</div>
|
|
</div>
|
|
<!-- / Back -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 4 -->
|
|
|
|
|
|
<!-- WIDGET 5 -->
|
|
<fuse-widget class="" fxLayout="row" fxFlex="100">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
|
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap>
|
|
|
|
<div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div>
|
|
|
|
<div fxFlex="0 1 auto" class="py-8" fxLayout="row">
|
|
<button md-button class="px-16"
|
|
*ngFor="let range of widgets.widget5.ranges | keys"
|
|
(click)="widget5.currentRange = range.key"
|
|
[disabled]="widget5.currentRange == range.key">
|
|
{{range.value}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
|
|
<div class="h-420 mb-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
|
|
<ngx-charts-bar-vertical-stacked
|
|
*fuseIfOnDom
|
|
[scheme]="widget5.scheme"
|
|
[results]="this.widgets.widget5.mainChart[this.widget5.currentRange]"
|
|
[gradient]="widget5.gradient"
|
|
[xAxis]="widget5.xAxis"
|
|
[yAxis]="widget5.yAxis"
|
|
[legend]="widget5.legend"
|
|
[showXAxisLabel]="widget5.showXAxisLabel"
|
|
[showYAxisLabel]="widget5.showYAxisLabel"
|
|
[xAxisLabel]="widget5.xAxisLabel"
|
|
[yAxisLabel]="widget5.yAxisLabel"
|
|
(select)="widget5.onSelect($event)">
|
|
</ngx-charts-bar-vertical-stacked>
|
|
</div>
|
|
|
|
<div class="mb-16" fxFlex="100" fxFlex.gt-sm="50" fxLayoutWrap>
|
|
|
|
<div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center"
|
|
*ngFor="let widget of widgets.widget5.supporting | keys">
|
|
|
|
<div class="px-24">
|
|
<div class="h4 secondary-text">{{widget.value.label}}</div>
|
|
<div class="mat-display-1 m-0">
|
|
{{widget.value.count[widget5.currentRange]}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-64">
|
|
<ngx-charts-area-chart
|
|
*fuseIfOnDom
|
|
[results]="widget.value.chart[widget5.currentRange]"
|
|
[scheme]="widget5.supporting.scheme"
|
|
[gradient]="widget5.supporting.gradient"
|
|
[xAxis]="widget5.supporting.xAxis"
|
|
[yAxis]="widget5.supporting.yAxis"
|
|
[legend]="widget5.supporting.legend"
|
|
[showXAxisLabel]="widget5.supporting.showXAxisLabel"
|
|
[showYAxisLabel]="widget5.supporting.showYAxisLabel"
|
|
[xAxisLabel]="widget5.supporting.xAxisLabel"
|
|
[yAxisLabel]="widget5.supporting.yAxisLabel"
|
|
[curve]="widget5.supporting.curve">
|
|
>
|
|
</ngx-charts-area-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 5 -->
|
|
|
|
|
|
<!-- WIDGET 6 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
|
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h3">{{widgets.widget6.title}}</div>
|
|
<div class="py-16">
|
|
<md-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
|
|
<md-option *ngFor="let range of widgets.widget6.ranges | keys"
|
|
[value]="range.key">
|
|
{{range.value}}
|
|
</md-option>
|
|
</md-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-400">
|
|
<ngx-charts-pie-chart
|
|
*fuseIfOnDom
|
|
[scheme]="widget6.scheme"
|
|
[results]="widgets.widget6.mainChart[widget6.currentRange]"
|
|
[legend]="widget6.showLegend"
|
|
[explodeSlices]="widget6.explodeSlices"
|
|
[labels]="widget6.labels"
|
|
[doughnut]="widget6.doughnut"
|
|
[gradient]="widget6.gradient"
|
|
(select)="widget6.onSelect($event)">
|
|
</ngx-charts-pie-chart>
|
|
</div>
|
|
|
|
<div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
|
|
<div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
|
|
<span class="mat-display-1 mb-0">{{widgets.widget6.footerLeft.count[widget6.currentRange]}}</span>
|
|
<span class="h4">{{widgets.widget6.footerLeft.title}}</span>
|
|
</div>
|
|
|
|
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
|
|
<span class="mat-display-1 mb-0">{{widgets.widget6.footerRight.count[widget6.currentRange]}}</span>
|
|
<span class="h4">{{widgets.widget6.footerRight.title}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 6 -->
|
|
|
|
<!-- WIDGET 7 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
|
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h3">{{widgets.widget7.title}}</div>
|
|
|
|
<div class="py-16">
|
|
<md-select class="simplified" [(ngModel)]="widget7.currentRange"
|
|
aria-label="Change range">
|
|
<md-option *ngFor="let range of widgets.widget7.ranges | keys"
|
|
[value]="range.key">
|
|
{{range.value}}
|
|
</md-option>
|
|
</md-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
|
|
*ngFor="let event of widgets.widget7.schedule[widget7.currentRange]">
|
|
<div>
|
|
<div class="h3">{{event.title}}</div>
|
|
<div>
|
|
<span class="secondary-text">{{event.time}}</span>
|
|
<span *ngIf="event.location">, {{event.location}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button md-icon-button aria-label="More information">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 7 -->
|
|
|
|
</div>
|
|
<!-- / WIDGET GROUP -->
|
|
|
|
|
|
</md-tab>
|
|
|
|
<md-tab label="Budget Summary">
|
|
|
|
<!-- WIDGET GROUP -->
|
|
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap>
|
|
|
|
<!-- WIDGET 8 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
<div class="h3 p-16">
|
|
{{widgets.widget8.title}}
|
|
</div>
|
|
|
|
<md-divider></md-divider>
|
|
|
|
<div class="h-400">
|
|
<ngx-charts-pie-chart
|
|
*fuseIfOnDom
|
|
[scheme]="widget8.scheme"
|
|
[results]="widgets.widget8.mainChart"
|
|
[legend]="widget8.legend"
|
|
[explodeSlices]="widget8.explodeSlices"
|
|
[labels]="widget8.labels"
|
|
[doughnut]="widget8.doughnut"
|
|
[gradient]="widget8.gradient"
|
|
(select)="widget8.onSelect($event)">
|
|
</ngx-charts-pie-chart>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 8 -->
|
|
|
|
<!-- WIDGET 9 -->
|
|
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h3">{{widgets.widget9.title}}</div>
|
|
|
|
<div class="py-16">
|
|
<md-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
|
|
<md-option *ngFor="let range of widgets.widget9.ranges | keys"
|
|
[value]="range.key">
|
|
{{range.value}}
|
|
</md-option>
|
|
</md-select>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
|
|
fxLayoutAlign.gt-xs="space-between end">
|
|
<div fxFlex="0 1 auto">
|
|
<div class="h4 secondary-text">{{widgets.widget9.weeklySpent.title}}</div>
|
|
<div class="pt-8 mat-display-1 m-0 font-weight-300 text-nowrap">
|
|
<span class="secondary-text">$</span>
|
|
<span>{{widgets.widget9.weeklySpent.count[widget9.currentRange]}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-52" fxFlex>
|
|
<ngx-charts-area-chart
|
|
*fuseIfOnDom
|
|
[results]="widgets.widget9.weeklySpent.chart[widget9.currentRange]"
|
|
[scheme]="widget9.scheme"
|
|
[gradient]="widget9.gradient"
|
|
[xAxis]="widget9.xAxis"
|
|
[yAxis]="widget9.yAxis"
|
|
[legend]="widget9.legend"
|
|
[showXAxisLabel]="widget9.showXAxisLabel"
|
|
[showYAxisLabel]="widget9.showYAxisLabel"
|
|
[xAxisLabel]="widget9.xAxisLabel"
|
|
[yAxisLabel]="widget9.yAxisLabel"
|
|
[curve]="widget9.curve">
|
|
</ngx-charts-area-chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
|
|
fxLayoutAlign.gt-xs="space-between end">
|
|
<div fxFlex="0 1 auto">
|
|
<div class="h4 secondary-text">{{widgets.widget9.totalSpent.title}}</div>
|
|
<div class="pt-8 mat-display-1 m-0 font-weight-300 text-nowrap">
|
|
<span class="secondary-text">$</span>
|
|
<span>{{widgets.widget9.totalSpent.count[widget9.currentRange]}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-52" fxFlex>
|
|
<ngx-charts-area-chart
|
|
*fuseIfOnDom
|
|
[results]="widgets.widget9.totalSpent.chart[widget9.currentRange]"
|
|
[scheme]="widget9.scheme"
|
|
[gradient]="widget9.gradient"
|
|
[xAxis]="widget9.xAxis"
|
|
[yAxis]="widget9.yAxis"
|
|
[legend]="widget9.legend"
|
|
[showXAxisLabel]="widget9.showXAxisLabel"
|
|
[showYAxisLabel]="widget9.showYAxisLabel"
|
|
[xAxisLabel]="widget9.xAxisLabel"
|
|
[yAxisLabel]="widget9.yAxisLabel"
|
|
[curve]="widget9.curve">
|
|
</ngx-charts-area-chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
|
|
fxLayoutAlign.gt-xs="space-between end">
|
|
<div fxFlex="0 1 auto">
|
|
<div class="h4 secondary-text">{{widgets.widget9.remaining.title}}</div>
|
|
<div class="pt-8 mat-display-1 m-0 font-weight-300 text-nowrap">
|
|
<span class="secondary-text">$</span>
|
|
<span>{{widgets.widget9.remaining.count[widget9.currentRange]}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-52" fxFlex>
|
|
<ngx-charts-area-chart
|
|
*fuseIfOnDom
|
|
[results]="widgets.widget9.remaining.chart[widget9.currentRange]"
|
|
[scheme]="widget9.scheme"
|
|
[gradient]="widget9.gradient"
|
|
[xAxis]="widget9.xAxis"
|
|
[yAxis]="widget9.yAxis"
|
|
[legend]="widget9.legend"
|
|
[showXAxisLabel]="widget9.showXAxisLabel"
|
|
[showYAxisLabel]="widget9.showYAxisLabel"
|
|
[xAxisLabel]="widget9.xAxisLabel"
|
|
[yAxisLabel]="widget9.yAxisLabel"
|
|
[curve]="widget9.curve">
|
|
</ngx-charts-area-chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16 border-top">
|
|
<div class="h4 secondary-text">{{widgets.widget9.totalBudget.title}}</div>
|
|
<div class="pt-8 mat-display-1 m-0 font-weight-300">
|
|
<span class="secondary-text">$</span>
|
|
<span>{{widgets.widget9.totalBudget.count}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 9 -->
|
|
|
|
<!-- WIDGET 10 -->
|
|
<fuse-widget class="" fxLayout="row" fxFlex="100">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
|
|
<div class="simple-table-container" ms-responsive-table>
|
|
<div class=" table-title">
|
|
{{widgets.widget10.title}}
|
|
</div>
|
|
|
|
<table class="simple">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th *ngFor="let column of widgets.widget10.table.columns">
|
|
{{column.title}}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr *ngFor="let row of widgets.widget10.table.rows">
|
|
<td *ngFor="let cell of row">
|
|
<span class="p-4" [class]="cell.classes">
|
|
{{cell.value}}
|
|
</span>
|
|
<md-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</md-icon>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 10 -->
|
|
|
|
</div>
|
|
<!-- / WIDGET GROUP -->
|
|
|
|
</md-tab>
|
|
|
|
<md-tab label="Team Members">
|
|
|
|
<!-- WIDGET GROUP -->
|
|
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap>
|
|
|
|
<!-- WIDGET 11 -->
|
|
<fuse-widget class="" fxLayout="row" fxFlex="100">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
|
|
|
<div class="p-24 mb-8 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="h2">{{widgets.widget11.title}}</div>
|
|
<div class="text-boxed red-bg white-fg m-0">{{widgets.widget11.table.rows.length}}
|
|
members
|
|
</div>
|
|
</div>
|
|
|
|
<md-table #table [dataSource]="widget11.dataSource">
|
|
|
|
<!-- Avatar Column -->
|
|
<ng-container cdkColumnDef="avatar">
|
|
<md-header-cell fxFlex="64px" *cdkHeaderCellDef></md-header-cell>
|
|
<md-cell fxFlex="64px" *cdkCellDef="let contact">
|
|
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
|
|
[src]="contact.avatar"/>
|
|
</md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container cdkColumnDef="name">
|
|
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
|
|
<md-cell *cdkCellDef="let contact">
|
|
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
|
|
</md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Position Column -->
|
|
<ng-container cdkColumnDef="position">
|
|
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</md-header-cell>
|
|
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
|
|
<p class="position text-truncate">
|
|
{{contact.position}}
|
|
</p>
|
|
</md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Office Column -->
|
|
<ng-container cdkColumnDef="office">
|
|
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</md-header-cell>
|
|
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
|
|
<p class="office text-truncate">
|
|
{{contact.office}}
|
|
</p>
|
|
</md-cell>
|
|
</ng-container>
|
|
|
|
|
|
<!-- Email Column -->
|
|
<ng-container cdkColumnDef="email">
|
|
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell>
|
|
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
|
|
<p class="email text-truncate">
|
|
{{contact.email}}
|
|
</p>
|
|
</md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Phone Column -->
|
|
<ng-container cdkColumnDef="phone">
|
|
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell>
|
|
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
|
|
<p class="phone text-truncate">
|
|
{{contact.phone}}
|
|
</p>
|
|
</md-cell>
|
|
</ng-container>
|
|
|
|
<md-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></md-header-row>
|
|
<md-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
|
|
</md-row>
|
|
</md-table>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WIDGET 11 -->
|
|
|
|
</div>
|
|
<!-- / WIDGET GROUP -->
|
|
|
|
</md-tab>
|
|
</md-tab-group>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|
|
<!-- / CENTER -->
|
|
|
|
<!-- SIDENAV -->
|
|
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
|
|
|
|
<div class="sidenav-content" perfect-scrollbar>
|
|
<!-- WIDGET GROUP -->
|
|
<div class="widget-group" fxLayout="column" fxFlex="100">
|
|
|
|
<!-- NOW WIDGET -->
|
|
<fuse-widget class="sidenav-widget p-0">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front">
|
|
|
|
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
|
|
|
<div class="h3">{{dateNow | date: 'EEEE, h:m:ss'}}</div>
|
|
|
|
<div>
|
|
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
|
|
<md-menu #moreMenu="mdMenu">
|
|
<button md-menu-item aria-label="Flip widget">
|
|
Details
|
|
</button>
|
|
</md-menu>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
|
|
<div class="h1 secondary-text">
|
|
<span>{{dateNow | date: 'MMMM'}}</span>
|
|
</div>
|
|
|
|
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
|
|
{{dateNow | date: 'd'}}
|
|
</div>
|
|
|
|
<div class="h1 secondary-text">
|
|
<span>{{dateNow | date: 'y'}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<md-divider></md-divider>
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / NOW WIDGET -->
|
|
|
|
|
|
<!-- WEATHER WIDGET -->
|
|
<fuse-widget class="sidenav-widget p-0">
|
|
|
|
<!-- Front -->
|
|
<div class="fuse-widget-front">
|
|
|
|
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
|
|
|
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon class="mr-8">place</md-icon>
|
|
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
|
|
</div>
|
|
|
|
<div>
|
|
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
|
|
<md-icon>more_vert</md-icon>
|
|
</button>
|
|
|
|
<md-menu #moreMenu="mdMenu">
|
|
<button md-menu-item aria-label="Flip widget">
|
|
Details
|
|
</button>
|
|
</md-menu>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
|
|
|
<div fxLayout="row" fxLayoutAlign="center center">
|
|
<md-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
|
|
class="icon s-40 mr-16"></md-icon>
|
|
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
|
|
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
|
|
</span>
|
|
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
|
|
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></md-icon>
|
|
<span>
|
|
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
|
|
</span>
|
|
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
|
|
</div>
|
|
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></md-icon>
|
|
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span>
|
|
</div>
|
|
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></md-icon>
|
|
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-16">
|
|
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
|
|
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
|
|
<span class="h4">{{day.name}}</span>
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></md-icon>
|
|
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
|
|
<span class="h2 font-weight-300 secondary-text text-super">°</span>
|
|
<span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<md-divider></md-divider>
|
|
|
|
</div>
|
|
<!-- / Front -->
|
|
|
|
</fuse-widget>
|
|
<!-- / WEATHER WIDGET -->
|
|
|
|
</div>
|
|
<!-- / WIDGET GROUP -->
|
|
</div>
|
|
|
|
</md-sidenav>
|
|
<!-- / SIDENAV -->
|
|
|
|
</md-sidenav-container>
|
|
|
|
</div>
|