Skip to content

Commit

Permalink
Customized wizard style(s) (#206)
Browse files Browse the repository at this point in the history 
* Add custom wizard style(s)

* run prettier
  • Loading branch information
@PhilipAB
PhilipAB authored Mar 13, 2024
1 parent 3a4a465 commit 9bc1bd8
Show file tree
Hide file tree
Showing 7 changed files with 788 additions and 486 deletions.
384 changes: 254 additions & 130 deletions src/app/configuration/environments/edit-environment/edit-environment.component.html
View file

Large diffs are not rendered by default.

500 changes: 308 additions & 192 deletions src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html
View file

Large diffs are not rendered by default.

248 changes: 149 additions & 99 deletions src/app/course/course-wizard/course-wizard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
clrWizardSize="xl"
(clrWizardOnFinish)="whenFinish()"
(clrWizardOnCancel)="doCancel()"
class="customized"
>
<clr-wizard-title> {{ wizardTitle }} </clr-wizard-title>

Expand Down Expand Up @@ -40,7 +41,13 @@
></vmset>
</clr-wizard-page>

<clr-wizard-page (clrWizardPageNext)="saveCourseWizard()" [clrWizardPageNextDisabled]="dragScenarios.length == 0 && editCategories.length == 0" *ngIf="wizardCourse=='edit'">
<clr-wizard-page
(clrWizardPageNext)="saveCourseWizard()"
[clrWizardPageNextDisabled]="
dragScenarios.length == 0 && editCategories.length == 0
"
*ngIf="wizardCourse == 'edit'"
>
<ng-template clrPageTitle>Scenarios</ng-template>
<ng-container *ngIf="listScenarios">
<button
Expand Down Expand Up @@ -108,7 +115,10 @@
</ng-container>
</clr-wizard-page>

<clr-wizard-page (clrWizardPageNext)="saveCourseWizard()" *ngIf="wizardCourse=='create'">
<clr-wizard-page
(clrWizardPageNext)="saveCourseWizard()"
*ngIf="wizardCourse == 'create'"
>
<ng-template clrPageTitle>Scenarios</ng-template>
<ng-container *ngIf="listScenarios">
<button
Expand Down Expand Up @@ -176,7 +186,11 @@
</ng-container>
</clr-wizard-page>

<clr-wizard-page [clrWizardPageNextDisabled]="dragScenarios.length == 0 && editCategories.length == 0">
<clr-wizard-page
[clrWizardPageNextDisabled]="
dragScenarios.length == 0 && editCategories.length == 0
"
>
<ng-template clrPageTitle>Dynamic Scenario</ng-template>
<ng-container>
<p>
Expand Down Expand Up @@ -270,7 +284,10 @@
<clr-control-error *clrIfError="'required'"
>Query required.</clr-control-error
>
<clr-control-error *clrIfError="'pattern'">Query shouldn't be empty or have non-latin letter</clr-control-error>
<clr-control-error *clrIfError="'pattern'"
>Query shouldn't be empty or have non-latin
letter</clr-control-error
>
</clr-input-container>
<div class="col-md-2">
<button
Expand All @@ -296,8 +313,7 @@
</clr-datagrid>
</ng-container>
</clr-wizard-page>
<clr-wizard-page
(clrWizardPageOnLoad)="updateFinalPageWizard()" >
<clr-wizard-page (clrWizardPageOnLoad)="updateFinalPageWizard()">
<ng-template clrPageTitle>Finalize</ng-template>
<p>Confirm the following details before finishing</p>
<h4>Course</h4>
Expand All @@ -311,86 +327,112 @@ <h4>Course</h4>
<tbody>
<tr>
<td>Name</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.name}} </td>
</ng-container>
<ng-container *ngIf="wizardCourse == 'edit'">
<td *ngIf="selectedCourse.name == editSelectedCourse.name">
{{ selectedCourse.name }}
</td>
<td *ngIf="selectedCourse.name != editSelectedCourse.name">
<span class="del-elem">{{
selectedCourse.name
}}</span>
<cds-icon shape="arrow" direction="right"></cds-icon>
<span class="add-elem">{{ editSelectedCourse.name }}</span>
</td>
</ng-container>

<ng-container *ngIf="wizardCourse == 'create'">
<td>{{ course.name }}</td>
</ng-container>
<ng-container *ngIf="wizardCourse == 'edit'">
<td *ngIf="selectedCourse.name == editSelectedCourse.name">
{{ selectedCourse.name }}
</td>
<td *ngIf="selectedCourse.name != editSelectedCourse.name">
<span class="del-elem">{{ selectedCourse.name }}</span>
<cds-icon shape="arrow" direction="right"></cds-icon>
<span class="add-elem">{{ editSelectedCourse.name }}</span>
</td>
</ng-container>
</tr>

<tr>
<td>Description</td>
<td>Description</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.description}} </td>
<td>{{ course.description }}</td>
</ng-container>
<ng-container *ngIf="wizardCourse == 'edit'">
<td *ngIf="selectedCourse.description == editSelectedCourse.description">
<ng-container *ngIf="wizardCourse == 'edit'">
<td
*ngIf="
selectedCourse.description == editSelectedCourse.description
"
>
{{ selectedCourse.description }}
</td>
<td *ngIf="selectedCourse.description != editSelectedCourse.description">
<span class="del-elem">{{
selectedCourse.description
}}</span>
<td
*ngIf="
selectedCourse.description != editSelectedCourse.description
"
>
<span class="del-elem">{{ selectedCourse.description }}</span>
<cds-icon shape="arrow" direction="right"></cds-icon>
<span class="add-elem">{{ editSelectedCourse.description }}</span>
</td>
</ng-container>

<span class="add-elem">{{ editSelectedCourse.description }}</span>
</td>
</ng-container>
</tr>
<tr>
<td>Keepalive Duration</td>
<td>Keepalive Duration</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.keepalive_duration}} </td>
<td>{{ course.keepalive_duration }}</td>
</ng-container>
<ng-container *ngIf="wizardCourse == 'edit'">
<td *ngIf="selectedCourse.keepalive_duration == editSelectedCourse.keepalive_duration">
<ng-container *ngIf="wizardCourse == 'edit'">
<td
*ngIf="
selectedCourse.keepalive_duration ==
editSelectedCourse.keepalive_duration
"
>
{{ selectedCourse.keepalive_duration }}
</td>
<td *ngIf="selectedCourse.keepalive_duration != editSelectedCourse.keepalive_duration">
<td
*ngIf="
selectedCourse.keepalive_duration !=
editSelectedCourse.keepalive_duration
"
>
<span class="del-elem">{{
selectedCourse.keepalive_duration
}}</span>
<cds-icon shape="arrow" direction="right"></cds-icon>
<span class="add-elem">{{ editSelectedCourse.keepalive_duration }}</span>
</td>
</ng-container>
<span class="add-elem">{{
editSelectedCourse.keepalive_duration
}}</span>
</td>
</ng-container>
</tr>
<tr>
<td>Pause Duration</td>
<td>Pause Duration</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.pause_duration}} </td>
<td>{{ course.pause_duration }}</td>
</ng-container>
<ng-container *ngIf="wizardCourse == 'edit'">
<td *ngIf="selectedCourse.pause_duration == editSelectedCourse.pause_duration">
<ng-container *ngIf="wizardCourse == 'edit'">
<td
*ngIf="
selectedCourse.pause_duration ==
editSelectedCourse.pause_duration
"
>
{{ selectedCourse.pause_duration }}
</td>
<td *ngIf="selectedCourse.pause_duration != editSelectedCourse.pause_duration">
<span class="del-elem">{{
selectedCourse.pause_duration
}}</span>
<td
*ngIf="
selectedCourse.pause_duration !=
editSelectedCourse.pause_duration
"
>
<span class="del-elem">{{ selectedCourse.pause_duration }}</span>
<cds-icon shape="arrow" direction="right"></cds-icon>
<span class="add-elem">{{ editSelectedCourse.pause_duration }}</span>
</td>
</ng-container>
</tr>
<span class="add-elem">{{
editSelectedCourse.pause_duration
}}</span>
</td>
</ng-container>
</tr>
<tr>
<td>Scenario</td>
<td>
<ng-container *ngFor="let s of selectedCourse.scenarios">
<span class="label" *ngIf="isScenarioInList(s, editSelectedCourse.scenarios)">{{
s.name
}}</span>
<span
class="label"
*ngIf="isScenarioInList(s, editSelectedCourse.scenarios)"
>{{ s.name }}</span
>
<span
class="label del-elem"
*ngIf="!isScenarioInList(s, editSelectedCourse.scenarios)"
Expand All @@ -411,58 +453,66 @@ <h4>Course</h4>
<td>
<ng-container *ngIf="wizardCourse == 'create'">
<span class="label" *ngFor="let categorie of course.categories"
>{{ categorie }}
</span>
>{{ categorie }}
</span>
</ng-container>
<ng-container *ngIf="wizardCourse == 'edit'">
<span class="label" *ngFor="let categorie of selectedCourse.categories"
>{{ categorie }}
</span>
<span
class="label"
*ngFor="let categorie of selectedCourse.categories"
>{{ categorie }}
</span>
</ng-container>
</td>
</tr>
</tbody>
</table>
<h4>VM Information</h4>
<table class="table table-compact">
<thead>
<tr>
<th>VM Name</th>
<th>VM Template</th>
<table class="table table-compact">
<thead>
<tr>
<th>VM Name</th>
<th>VM Template</th>
</tr>
</thead>
<tbody>
<ng-container
*ngFor="let i of editSelectedCourse.virtualmachines | keyvalue"
>
<tr *ngFor="let q of showVM(i.value) | keyvalue">
<!-- view of unedit value -->
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) != 0">
<td>{{ q.key }}</td>
</ng-container>
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) == q.value">
<td>{{ q.value }}</td>
</ng-container>
<!-- view of new key -->
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) === 0">
<td class="add-elem">{{ q.key }}</td>
<td class="add-elem">{{ q.value }}</td>
</ng-container>
<!-- view of edit value (delete VM and create VM with the same VM Name) -->
<ng-container *ngIf="isEditedVM(i.key, q.key, q.value)">
<td class="add-elem">{{ q.value }}</td>
</ng-container>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let i of editSelectedCourse.virtualmachines | keyvalue">
<tr *ngFor="let q of showVM(i.value) | keyvalue">
<!-- view of unedit value -->
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) != 0">
<td>{{ q.key }}</td>
</ng-container>
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) == q.value">
<td> {{ q.value }}</td>
</ng-container>
<!-- view of new key -->
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) === 0">
<td class="add-elem">{{ q.key }}</td>
<td class="add-elem">{{ q.value }}</td>
</ng-container>
<!-- view of edit value (delete VM and create VM with the same VM Name) -->
<ng-container *ngIf="isEditedVM(i.key, q.key, q.value)">
<td class=" add-elem"> {{ q.value }}</td>
</ng-container>
</tr>
</ng-container>
<!-- view deleted key -->
<ng-container *ngFor="let i of selectedCourse.virtualmachines | keyvalue">
</ng-container>
<!-- view deleted key -->
<ng-container
*ngFor="let i of selectedCourse.virtualmachines | keyvalue"
>
<tr *ngFor="let q of showVM(i.value) | keyvalue">
<ng-container *ngIf="getEditSelectedCourseVM(i.key, q.key) != q.value">
<td class="del-elem">{{ q.key }}</td>
<td class="del-elem">{{ q.value }}</td >
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
<ng-container
*ngIf="getEditSelectedCourseVM(i.key, q.key) != q.value"
>
<td class="del-elem">{{ q.key }}</td>
<td class="del-elem">{{ q.value }}</td>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
</clr-wizard-page>
</clr-wizard>
<add-scenario
Expand Down
11 changes: 8 additions & 3 deletions src/app/event/new-scheduled-event/new-scheduled-event.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
clrWizardSize="xl"
(clrWizardOnFinish)="save()"
(clrWizardOnCancel)="close()"
class="customized"
>
<clr-wizard-title>New Scheduled Event</clr-wizard-title>

Expand Down Expand Up @@ -163,7 +164,8 @@
<ng-template clrPageTitle>Event Times</ng-template>
<div class="clr-row">
<div class="clr-col">
Start Time: {{ se.start_time ? (se.start_time | date : 'long') : '' }} <br />
Start Time:
{{ se.start_time ? (se.start_time | date : "long") : "" }} <br />
<clr-signpost>
<button class="btn btn-link" clrSignpostTrigger>
Set Start Time
Expand All @@ -189,7 +191,8 @@

<div class="clr-row">
<div class="clr-col">
End Time: {{ se.end_time ? (se.end_time | date : 'long') : '' }} <br />
End Time: {{ se.end_time ? (se.end_time | date : "long") : "" }}
<br />
<clr-signpost>
<button class="btn btn-link" clrSignpostTrigger>
Set End Time
Expand Down Expand Up @@ -271,7 +274,9 @@
<p>
<i> All times are in {{ tz }} (browser detected) </i>
</p>
<ng-container *ngIf="se.start_time && se.end_time && se.start_time >= se.end_time">
<ng-container
*ngIf="se.start_time && se.end_time && se.start_time >= se.end_time"
>
<clr-alert
[clrAlertSizeSmall]="true"
[clrAlertType]="'danger'"
Expand Down
3 changes: 1 addition & 2 deletions src/app/scenario/scenario-wizard/scenario-wizard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
clrWizardSize="xl"
(clrWizardOnFinish)="finishScenario()"
(clrWizardOnCancel)="doCancel()"
class="customized"
>
<clr-wizard-title>{{ wizardTitle }} </clr-wizard-title>

Expand Down Expand Up @@ -485,5 +486,3 @@ <h3 class="modal-title">Delete VM Set</h3>
</button>
</div>
</clr-modal>


Loading

0 comments on commit 9bc1bd8

Please sign in to comment.