Skip to content

Commit

Permalink
Issue339 content courses (#192)
Browse files Browse the repository at this point in the history 
* add color to Content Management/Courses Name, Discription, Duration

* refactor function for set value in course in Management/Courses

* add list of vms and scenario in course in Management/Courses

* add edit color of vms in course in Management/Courses

* add edit color of scenario in course in Management/Courses

* fix: when empty vms then not start wizard of scenario in course in Management/Courses

---------

Co-authored-by: Maksym Veres <[email protected]>
  • Loading branch information
@maxsva
maxsva and Maksym Veres authored Nov 20, 2023
1 parent 4307abe commit 401f89b
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 45 deletions.
145 changes: 127 additions & 18 deletions src/app/course/course-wizard/course-wizard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,8 @@
</clr-datagrid>
</ng-container>
</clr-wizard-page>
<clr-wizard-page>
<clr-wizard-page
(clrWizardPageOnLoad)="updateFinalPageWizard()" >
<ng-template clrPageTitle>Finalize</ng-template>
<p>Confirm the following details before finishing</p>
<h4>Course</h4>
Expand All @@ -310,33 +311,99 @@ <h4>Course</h4>
<tbody>
<tr>
<td>Name</td>
<td>
{{ wizardCourse == "create" ? course.name : selectedCourse.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>
<clr-icon shape="arrow" dir="right"></clr-icon>
<span class="add-elem">{{ editSelectedCourse.name }}</span>
</td>
</ng-container>

</tr>

<tr>
<td>Description</td>
<td> {{ wizardCourse == "create" ? course.description : selectedCourse.description }}</td>
</tr>
<tr>
<td>Keepalive Duration</td>
<td>{{ wizardCourse == "create" ? course.keepalive_duration : selectedCourse.keepalive_duration }}</td>
<td>Description</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.description}} </td>
</ng-container>
<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>
<clr-icon shape="arrow" dir="right"></clr-icon>
<span class="add-elem">{{ editSelectedCourse.description }}</span>
</td>
</ng-container>

</tr>
<tr>
<td>Pause Duration</td>
<td>{{ wizardCourse == "create" ? course.pause_duration : selectedCourse.pause_duration }}</td>
<td>Keepalive Duration</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.keepalive_duration}} </td>
</ng-container>
<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">
<span class="del-elem">{{
selectedCourse.keepalive_duration
}}</span>
<clr-icon shape="arrow" dir="right"></clr-icon>
<span class="add-elem">{{ editSelectedCourse.keepalive_duration }}</span>
</td>
</ng-container>
</tr>
<tr>
<td>Virtual Machines</td>
<td>{{ editVirtualMachines.length }}</td>
</tr>
<td>Pause Duration</td>
<ng-container *ngIf="wizardCourse == 'create'">
<td>{{course.pause_duration}} </td>
</ng-container>
<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>
<clr-icon shape="arrow" dir="right"></clr-icon>
<span class="add-elem">{{ editSelectedCourse.pause_duration }}</span>
</td>
</ng-container>
</tr>
<tr>
<td>Scenario</td>
<td>
<span class="label" *ngFor="let scenario of dragScenarios"
>{{ scenario.name }}
</span>
<ng-container *ngFor="let s of selectedCourse.scenarios">
<span class="label" *ngIf="isScenarioInList(s, editSelectedCourse.scenarios)">{{
s.name
}}</span>
<span
class="label del-elem"
*ngIf="!isScenarioInList(s, editSelectedCourse.scenarios)"
>{{ s.name }}<clr-icon shape="trash"></clr-icon
></span>
</ng-container>
<ng-container *ngFor="let s of editSelectedCourse.scenarios">
<span
class="label add-elem"
*ngIf="!isScenarioInList(s, selectedCourse.scenarios)"
>{{ s.name }} <clr-icon shape="plus"></clr-icon
></span>
</ng-container>
</td>
</tr>
<tr>
Expand All @@ -356,6 +423,48 @@ <h4>Course</h4>
</tr>
</tbody>
</table>
<h4>VM Information</h4>
<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 -->
<ng-container *ngIf="getSelectedCourseVM(i.key, q.key) != q.value && getSelectedCourseVM(i.key, q.key) != 0 ">
<td class=" del-elem after" style="margin-right: 0">
{{ getSelectedCourseVM(i.key, q.key) }}</td>
<td class=" add-elem"> {{ q.value }}</td>
</ng-container>
</tr>
</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>
</clr-wizard-page>
</clr-wizard>
<add-scenario
Expand Down
15 changes: 15 additions & 0 deletions src/app/course/course-wizard/course-wizard.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.del-elem {
color:red;
font-weight: bold;
}

.arrow-after::after {
color:black;
content: ' \1F862 ';
vertical-align: middle;
}

.add-elem {
color:green;
font-weight: bold;
}
80 changes: 53 additions & 27 deletions src/app/course/course-wizard/course-wizard.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { HttpErrorResponse } from '@angular/common/http';
import { ServerResponse } from 'src/app/data/serverresponse';
import { AddScenarioComponent } from '../add-scenario/add-scenario.component';
import { cloneDeep } from 'lodash-es';

import { Environment } from 'src/app/data/environment';
@Component({
selector: 'wizard-course',
templateUrl: './course-wizard.component.html',
Expand All @@ -30,7 +30,7 @@ import { cloneDeep } from 'lodash-es';
export class CourseWizardComponent implements OnChanges, OnInit {
public course: Course = new Course();
public selectedCourse: Course = new Course();

public editSelectedCourse: Course = new Course();
@Input()
public updateRbac: boolean;

Expand Down Expand Up @@ -151,10 +151,12 @@ export class CourseWizardComponent implements OnChanges, OnInit {
this.wizard.open();
}
VMSAllow() {
if(this.editVirtualMachines.length!=0){
if (Object.keys(this.editVirtualMachines[0]).length !== 0)
this.VMAllowNext = true;
if (Object.keys(this.editVirtualMachines[0]).length == 0)
this.VMAllowNext = false;
}
}
openEditCourse(course: Course) {
this.wizard.reset();
Expand Down Expand Up @@ -185,37 +187,35 @@ export class CourseWizardComponent implements OnChanges, OnInit {

saveCourseWizard() {
if (this.wizardCourse == 'create') this.newCourseWizard();
if (this.wizardCourse == 'edit') this.updateCourseWizard();
}
newCourseWizard() {
this.course.name = this.form.get('course_name').value;
this.course.description = this.form.get('course_description').value;
this.course.keepalive_duration =

setCourseValues(course: Course) {
course.name = this.form.get('course_name').value;
course.description = this.form.get('course_description').value;
course.keepalive_duration =
this.form.get('keepalive_amount').value +
this.form.get('keepalive_unit').value;
this.course.pause_duration = this.form.get('pause_duration').value + 'h';
this.course.pauseable = this.form.get('pauseable').value;
this.course.keep_vm = this.form.get('keep_vm').value;
this.course.virtualmachines = this.editVirtualMachines;
this.course.scenarios = this.dragScenarios;
this.course.categories = this.editCategories;
course.pause_duration = this.form.get('pause_duration').value + 'h';
course.pauseable = this.form.get('pauseable').value;
course.keep_vm = this.form.get('keep_vm').value;
course.virtualmachines = this.editVirtualMachines;
course.scenarios = cloneDeep(this.dragScenarios);
course.categories = this.editCategories;
}
newCourseWizard() {
this.setCourseValues(this.course)
}
updateCourseWizard() {
this.selectedCourse.name = this.form.get('course_name').value;
this.selectedCourse.description = this.form.get('course_description').value;
this.selectedCourse.keepalive_duration =
this.form.get('keepalive_amount').value +
this.form.get('keepalive_unit').value;
this.selectedCourse.pause_duration =
this.form.get('pause_duration').value + 'h';
this.selectedCourse.pauseable = this.form.get('pauseable').value;
this.selectedCourse.keep_vm = this.form.get('keep_vm').value;
this.selectedCourse.categories = this.editCategories;
this.selectedCourse.scenarios = this.dragScenarios;
this.selectedCourse.virtualmachines = this.editVirtualMachines;
this.setCourseValues(this.selectedCourse)
}
updateFinalPageWizard() {
if (this.wizardCourse == 'edit'){
this.setCourseValues(this.editSelectedCourse)
}
}

setVM(vms: {}[]) {
console.log("vms = " + vms)
this.editVirtualMachines = vms;
this.VMSAllow();
this.setModified();
Expand All @@ -229,6 +229,7 @@ export class CourseWizardComponent implements OnChanges, OnInit {
}

deleteScenario(i: number) {
this.editSelectedCourse.scenarios.splice(i, 1);
this.dragScenarios.splice(i, 1);
this.setModified();
}
Expand Down Expand Up @@ -287,6 +288,7 @@ export class CourseWizardComponent implements OnChanges, OnInit {
this.updateDynamicScenarios();
this.setModified();
}

openAdd() {
this.addScenario.open();
}
Expand All @@ -296,15 +298,20 @@ export class CourseWizardComponent implements OnChanges, OnInit {
// because this can be called when unsetting the selected course
this.courseDetailsActive = true;
setTimeout(() => this.courseForm.reset(), 200); // hack
this.dragScenarios = c.scenarios;
this.dragScenarios = cloneDeep(c.scenarios);
this.editVirtualMachines = cloneDeep(c.virtualmachines);
this.editCategories = c.categories;
this.updateDynamicScenarios();
}
}

whenFinish() {

if (this.wizardCourse == 'create') this.createCourse();
if (this.wizardCourse == 'edit') this.updateCourse();
if (this.wizardCourse == 'edit') {
this.updateCourseWizard();
this.updateCourse();
}
this.courseForm.resetFormToRenew();
this.virtualMachine.resetVmSet();
this.dragScenarios = [];
Expand All @@ -329,6 +336,7 @@ export class CourseWizardComponent implements OnChanges, OnInit {
}
);
}

updateCourse() {
this.courseService.update(this.selectedCourse).subscribe(
(s: ServerResponse) => {
Expand All @@ -342,5 +350,23 @@ export class CourseWizardComponent implements OnChanges, OnInit {
this.isAlert = true;
}
);
}

getSelectedCourseVM(index: any, vmname: any) {
const selectedCourseVMs = this.showVM( this.selectedCourse.virtualmachines[index])
return selectedCourseVMs.has(vmname) ? selectedCourseVMs.get(vmname) : 0;
}

getEditSelectedCourseVM(index: any, vmname: any) {
const editSelectedCourseVMs = this.showVM( this.editSelectedCourse.virtualmachines[index])
return editSelectedCourseVMs.has(vmname) ? editSelectedCourseVMs.get(vmname) : 0;
}

showVM(vms: any) {
return new Map(Object.entries(JSON.parse(JSON.stringify(vms) )))
}

isScenarioInList(scenario: Scenario, list?: Scenario[]): boolean {
return list.some(item => item.name === scenario.name);
}
}

0 comments on commit 401f89b

Please sign in to comment.