added functionality

src/app/components/navigation/navigation.component.html

@@ -57,13 +57,6 @@
           routerLinkActive="routerLinkActive">
           <span class="pl-3">Compute Resources</span>
         </a>
-        <a class="sub-tab" mat-list-item [routerLink]="'./execution-environments/compute-resources'"
-          routerLinkActive="routerLinkActive">
-          <span class="pl-3">Compute Resources</span>
-        </a>
-        <a class="sub-tab" mat-list-item [href]="'http://localhost:5005/'" target="_blank">
-          <span class="pl-3">Qunicorn</span>
-        </a>
       </div>
       <a mat-list-item
         (click)="minorComponentsCollapse.show(); executionEnvironmentCollapseContent.hide(); literatureComponentsCollapse.hide()">

src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.html

@@ -11,10 +11,9 @@
         <div class="container">
           <div class="input-frame">
             <form (ngSubmit)="submitDeployment()">
-              <p class="description">Define your circuit and the type of the circuit for the deployment:</p>
-              <!--<input style="width: 100%; height: auto;" [(ngModel)]="userInput" name="userInput"
-              placeholder='OPENQASM 2.0;\ninclude \"qelib1.inc\";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1];\nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];' />
-            -->
+              <p class="description">Define the name, your circuit and the type of the circuit for the deployment:</p>
+              <input style="width: 100%; height: auto;" [(ngModel)]="deploymentName" name="deploymentName"
+                placeholder="PlanQK-UseCase" />
               <textarea [(ngModel)]="userInput" name="userInput" placeholder="OPENQASM 2.0;
 include &quot;qelib1.inc&quot;;
 qreg q[2];
@@ -69,12 +68,15 @@
       <mat-tab label="Invoke Job">
         <div class="input-frame">
           <form (ngSubmit)="invokeJob()">
+            <p class="description"> Choose a JobName:</p>
+            <input [(ngModel)]="jobName" name="jobName" placeholder="PlanQK-Job" />
             <p class="description"> Input your Deployment ID from the response in Step 1:</p>
             <input [(ngModel)]="deploymentID" name="deploymentID" placeholder=3 />
             <p class="description">Choose the platform where the Job should be running:</p>
             <div class="radio-group">
               <label>
-                <input type="radio" [(ngModel)]="selectedPlatform" name="platform" value="IBM" />
+                <input type="radio" [(ngModel)]="selectedPlatform" name="platform" value="IBM"
+                  [checked]="selectedPlatform ==='IBM'" />
                 IBM
               </label>
               <label>

src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.ts

@@ -3,6 +3,8 @@ import { Router } from '@angular/router';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { UtilService } from '../../../util/util.service';
 
+
+
 @Component({
   selector: 'qunicorn-service',
   templateUrl: './qunicorn-service.component.html',
@@ -13,11 +15,13 @@ export class QunicornAppComponent implements OnInit {
   variableNames = ['name'];
   loading = true;
 
-  userInput = '';
+  userInput: string = '';
   deploymentID = 3;
-  jobID = 3;
+  deploymentName: string = 'PlanQK-UseCase';
+  jobID: any = 1;
+  jobName: string = 'PlanQK-Job';
 
-  selectedPlatform = ''; // Added property for the selected platform
+  selectedPlatform = 'IBM'; // Added property for the selected platform
   selectedLanguage = 'QASM2';
 
   response: any;
@@ -35,9 +39,9 @@ export class QunicornAppComponent implements OnInit {
     private router: Router,
     private utilService: UtilService,
     private http: HttpClient
-  ) {}
+  ) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   getJobs() {
     this.http
@@ -59,25 +63,26 @@ export class QunicornAppComponent implements OnInit {
       .set('accept', 'application/json')
       .set('Content-Type', 'application/json');
 
-    if ((this.userInput = '')) {
+    if (this.userInput === '') {
       this.userInput =
         'OPENQASM 2.0;\ninclude "qelib1.inc";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1]; \
         \nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];\n';
     }
 
-    console.log(this.userInput);
+    console.log('userInput:', this.userInput);
+    console.log('selectedLanguage:', this.selectedLanguage);
 
     const requestBody = {
       programs: [
         {
-          quantumCircuit:
-            'OPENQASM 2.0;\ninclude "qelib1.inc";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1]; \
-            \nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];\n',
-          // quantumCircuit: this.userInput,
-          assemblerLanguage: 'QASM2',
+          // quantumCircuit:
+          //'OPENQASM 2.0;\ninclude "qelib1.inc";\nqreg q[2];\ncreg meas[2];\nh q[0];\ncx q[0],q[1]; \
+          //\nbarrier q[0],q[1];\nmeasure q[0] -> meas[0];\nmeasure q[1] -> meas[1];\n',
+          quantumCircuit: this.userInput,
+          assemblerLanguage: this.selectedLanguage,
         },
       ],
-      name: 'SeQuenC-UseCase',
+      name: this.deploymentName,
     };
 
     this.http
@@ -116,7 +121,7 @@ export class QunicornAppComponent implements OnInit {
       .set('Content-Type', 'application/json');
 
     const requestBody = {
-      name: 'JobName',
+      name: this.jobName,
       providerName: 'IBM',
       deviceName: 'aer_simulator',
       shots: 4000,