Skip to content
GitLab
Commit 8873089f authored by Alicja Reniewicz's avatar Alicja Reniewicz
Browse files

responsive view for process

parent 8b122333
Hide whitespace changes
Inline Side-by-side
src/app/file-uploader/files-queue/files-queue.component.html
View file @ 8873089f
<ng-content></ng-content>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="uploadAll()" [disabled]="">Upload</button>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="removeAll()" [disabled]="">Remove All
</button>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="uploadAll()">Upload</button>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="removeAll()">Remove All</button>
src/app/process/process-view/process-view.component.css
View file @ 8873089f
......@@ -49,7 +49,22 @@ mat-grid-list {
overflow: auto;
}
.second-col-mat-card-narrow-window {
height: 80%;
padding: var(--double-margin);
width: inherit;
overflow: auto;
}
.div-with-center {
width: 100%;
text-align: center !important;
}
#main-process-mat-card {
overflow: auto;
}
.full-height {
height: 100%;
}
src/app/process/process-view/process-view.component.html
View file @ 8873089f
<mat-card>
<mat-card id="main-process-mat-card">
<button button mat-raised-button color="primary" (click)="onAdvancedViewClick()">
Advanced view
</button>
......@@ -38,10 +38,11 @@
</mat-horizontal-stepper>
<mat-grid-list cols="{{getNumberOfCols()}}" rowHeight="{{getRowHeight()}}">
<!--wide window-->
<mat-grid-list *ngIf="!isNarrowWindow()" cols="{{getNumberOfColsForWideWindow()}}" rowHeight="11rem">
<!--first row-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getFetchingOffersStatus())"
(click)="onFetchingOffersClick()">
......@@ -56,7 +57,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getGeneratingConstraintProblemStatus())"
(click)="onGeneratingCPClick()">
......@@ -71,7 +72,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getReasoningStatus())">
<div class="process-element-title">
......@@ -85,7 +86,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getDeployingStatus())"
(click)="onDeployingClick()">
......@@ -100,7 +101,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getProcessFinishedStatus())">
<div class="process-element-title">
......@@ -116,7 +117,7 @@
<!--second row-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Current total number of offers:</p>
......@@ -130,7 +131,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Variables:</p>
......@@ -139,7 +140,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Solution:</p>
......@@ -148,7 +149,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile colspan="2">
<mat-grid-tile [colspan]="2" [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Deployment difference:</p>
......@@ -159,4 +160,129 @@
</mat-grid-list>
<!--narrow window-->
<mat-grid-list *ngIf="isNarrowWindow()" cols="2" rowHeight="{{getRowHeightForNarrowWindow()}}">
<!--first row - Fetching offers-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getFetchingOffersStatus())"
(click)="onFetchingOffersClick()">
<div class="process-element-title">
Fetching offers
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getFetchingOffersStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Current total number of offers:</p>
</div>
<mat-chip-list>
<div class="div-with-center">
<mat-chip color="primary" selected>{{totalNumberOffers}}</mat-chip>
</div>
</mat-chip-list>
</mat-card>
</mat-grid-tile>
<!--second row - Generating CP-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getGeneratingConstraintProblemStatus())"
(click)="onGeneratingCPClick()">
<div class="process-element-title">
Generating Constraint Problem
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getGeneratingConstraintProblemStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Variables:</p>
<app-cp-variables-view></app-cp-variables-view>
</div>
</mat-card>
</mat-grid-tile>
<!--third row - Reasoning-->
<mat-grid-tile>
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getReasoningStatus())">
<div class="process-element-title">
Reasoning
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getReasoningStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Solution:</p>
<app-cp-solution-view></app-cp-solution-view>
</div>
</mat-card>
</mat-grid-tile>
<!--fourth row - Deploying-->
<mat-grid-tile>
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getDeployingStatus())"
(click)="onDeployingClick()">
<div class="process-element-title">
Deploying
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getDeployingStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile rowspan="2">
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Deployment difference:</p>
<app-deployment-difference></app-deployment-difference>
</div>
</mat-card>
</mat-grid-tile>
<!--fifth row - Updating application state-->
<mat-grid-tile>
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getProcessFinishedStatus())">
<div class="process-element-title">
Updating application state
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getProcessFinishedStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</mat-card>
src/app/process/process-view/process-view.component.ts
View file @ 8873089f
......@@ -30,6 +30,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
processListDialog: MatDialogRef<ActiveProcessListComponent>;
totalNumberOffers = 0;
initialCheckingFetchingOffersState = true;
narrowWindowOnLastCheck = false;
constructor(private route: ActivatedRoute,
private router: Router,
......@@ -41,6 +42,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnInit() {
localStorage.setItem('viewTitle', 'Process');
this.narrowWindowOnLastCheck = this.isNarrowWindow();
const processId = this.route.snapshot.paramMap.get('id');
if (processId !== null) {
localStorage.setItem('processId', processId);
......@@ -74,6 +76,29 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
console.log('Component Process-view destroyed');
}
isNarrowWindow() {
const windowWidth = window.innerWidth;
if (windowWidth < 1350 && !this.narrowWindowOnLastCheck) {
this.narrowWindowOnLastCheck = true;
if (this.deploymentCompleted) {
console.log('First time with narrow - get data');
this.ngAfterViewInit();
}
return true;
} else if (windowWidth < 1350 && this.narrowWindowOnLastCheck) {
return true;
} else if (windowWidth >= 1350 && this.narrowWindowOnLastCheck) {
if (this.deploymentCompleted) {
console.log('First time with wide - get data');
this.ngAfterViewInit();
}
this.narrowWindowOnLastCheck = false;
return false;
} else {
return false;
}
}
onAdvancedViewClick() {
this.router.navigate(['/process/camunda']);
}
......@@ -259,7 +284,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
getNumberOfCols(): number {
getNumberOfColsForWideWindow(): number {
if (this.isReconfigurationProcess()) {
return 3;
} else {
......@@ -267,7 +292,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
getRowHeight() {
getRowHeightForWideWindow() {
if (this.isReconfigurationProcess()) {
return '1.5:1';
} else {
......@@ -275,6 +300,10 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
getRowHeightForNarrowWindow() {
return '0.8:1';
}
redirectToProperProcessView(existedProcesses: Array<ProcessInstance>) {
const startedProcesses = this.processHelperService.getStartedProcesses(existedProcesses);
const finishedProcesses = this.processHelperService.getFinishedProcesses(existedProcesses);
......@@ -308,7 +337,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
private updateNumberOfOffers() {
if (!this.isFetchingOffersCompleted() || this.initialCheckingFetchingOffersState) {
if (!this.isReconfigurationProcess() && (!this.isFetchingOffersCompleted() || this.initialCheckingFetchingOffersState)) {
this.processService.getTotalOffersNumber().subscribe(value => {
this.totalNumberOffers = value;
},
......@@ -320,25 +349,29 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
private updateSolutionView() {
if (!this.cpSolutionViewComponent.cpSolutionDownloaded && this.isReasoningCompleted()) {
if (!this.cpSolutionViewComponent.cpSolutionDownloaded && this.isReasoningCompleted()
&& this.cpSolutionViewComponent.loadingDataInProgress === false) {
this.cpSolutionViewComponent.downloadCpSolution();
}
}
private updateVariablesView() {
if (!this.cpVariablesViewComponent.cpDownloaded && this.isGeneratingConstraintProblemCompleted()) {
if (!this.isReconfigurationProcess() && (!this.cpVariablesViewComponent.cpDownloaded && this.isGeneratingConstraintProblemCompleted()
&& this.cpVariablesViewComponent.loadingDataInProgress === false)) {
this.cpVariablesViewComponent.downloadCp();
}
}
private updateDeploymentDifferenceViewAfterCreatingSolution() {
if (!this.deploymentDifferenceComponent.differenceAfterSolutionDownloaded && this.isReasoningCompleted()) {
if (!this.deploymentDifferenceComponent.differenceAfterSolutionDownloaded && this.isReasoningCompleted()
&& this.deploymentDifferenceComponent.loadingDataInProgress === false) {
this.deploymentDifferenceComponent.downloadDifference();
}
}
private updateDeploymentDifferenceViewAfterFinishedDeployment() {
if (!this.deploymentDifferenceComponent.differenceAfterDeploymentDownloaded && this.isDeployingCompleted()) {
if (!this.deploymentDifferenceComponent.differenceAfterDeploymentDownloaded && this.isDeployingCompleted()
&& this.deploymentDifferenceComponent.loadingDataInProgress === false) {
this.deploymentDifferenceComponent.downloadDifference();
this.deploymentDifferenceComponent.differenceAfterDeploymentDownloaded = true;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment