added functionality, automatic fill ins

Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /app
 
 COPY . .
 
-RUN npm install && npm run build --prod
+RUN npm ci && npm run build --prod
 
 FROM nginx:alpine
 COPY --from=builder app/dist/* /usr/share/nginx/html

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

@@ -14,7 +14,9 @@
               <p class="description">Define the name, the 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;
+              <textarea [(ngModel)]="userInput" name="userInput" [placeholder]= "placeholderCircuit"></textarea>
+<!--
+"OPENQASM 2.0;
 include &quot;qelib1.inc&quot;;
 qreg q[2];
 creg meas[2];
@@ -23,23 +25,23 @@
 barrier q[0],q[1];
 measure q[0] -&gt; meas[0];
 measure q[1] -&gt; meas[1];" rows="10"></textarea>
-
+              -->
               <div class="radio-group">
                 <label>
                   <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QASM2"
-                    [checked]="selectedLanguage === 'QASM2'" />
+                    [checked]="selectedLanguage === 'QASM2'" (change)="updatePlaceholder()"/>
                   QASM2
                 </label>
                 <label>
-                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QASM3" />
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QASM3" (change)="updatePlaceholder()" />
                   QASM3
                 </label>
                 <label>
-                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QISKIT" />
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QISKIT" (change)="updatePlaceholder()" />
                   QISKIT
                 </label>
                 <label>
-                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="BRAKET" />
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="BRAKET" (change)="updatePlaceholder()"/>
                   BRAKET
                 </label>
               </div>
@@ -50,7 +52,7 @@
 
           <!-- <button mat-flat-button color="primary" (click)="submitDeployment()">Submit Definitions</button> -->
           <div class="response-frame">
-            <p class="description">Deployment Response:</p>
+            <p class="description">Deployment Response {{deploymentID}} with the name: {{deploymentName}}:</p>
             <pre>{{ deploymentResponse }}</pre>
           </div>
 
@@ -72,7 +74,7 @@
             <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>
+            <p class="description">Choose the platform where the Job should be running {{selectedPlatform}} and {{selectedDevice}}:</p>
             <div class="radio-group">
               <label>
                 <input type="radio" [(ngModel)]="selectedPlatform" name="platform" value="IBM"

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

@@ -14,13 +14,16 @@ export class QunicornAppComponent implements OnInit {
   loading = true;
 
   userInput = '';
-  deploymentID = 3;
+  deploymentID: number = 3;
   deploymentName = 'PlanQK-UseCase';
   jobID: any = 1;
   jobName = 'PlanQK-Job';
+  placeholderCircuit: string = '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';
 
   selectedPlatform = 'IBM'; // Added property for the selected platform
   selectedLanguage = 'QASM2';
+  selectedDevice: string;
 
   response: any;
   jobResponse: any;
@@ -65,6 +68,7 @@ export class QunicornAppComponent implements OnInit {
       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';
+      this.userInput = this.placeholderCircuit;  
     }
 
     console.log('userInput:', this.userInput);
@@ -90,6 +94,11 @@ export class QunicornAppComponent implements OnInit {
       .subscribe(
         (data: any) => {
           this.deploymentResponse = JSON.stringify(data, null, 2);
+                // Parse the JSON string into an object
+          const parsedData = JSON.parse(this.deploymentResponse);
+
+          this.deploymentID = parsedData.id;
+          this.deploymentName = parsedData.name;
         },
         (error: any) => {
           this.deploymentResponse = 'Error occurred while making the request.';
@@ -118,10 +127,16 @@ export class QunicornAppComponent implements OnInit {
       .set('accept', 'application/json')
       .set('Content-Type', 'application/json');
 
+      if (this.selectedPlatform === 'IBM'){
+        this.selectedDevice = 'aer_simulator';
+      } else if (this.selectedPlatform == 'AWS'){
+        this.selectedDevice = 'local_simulator';
+      }
+
     const requestBody = {
       name: this.jobName,
-      providerName: 'IBM',
-      deviceName: 'aer_simulator',
+      providerName: this.selectedPlatform,
+      deviceName: this.selectedDevice,
       shots: 4000,
       // parameters: [0],
       token: '',
@@ -134,6 +149,11 @@ export class QunicornAppComponent implements OnInit {
       .subscribe(
         (data: any) => {
           this.jobResponse = JSON.stringify(data, null, 2);
+
+                // Parse the JSON string into an object
+          const parsedData = JSON.parse(this.jobResponse);
+
+          this.jobID = parsedData.id;
         },
         (error: any) => {
           this.jobResponse = 'Error occurred while making the request.';
@@ -166,4 +186,17 @@ export class QunicornAppComponent implements OnInit {
       console.log('No valid result data found.');
     }
   }
+
+  updatePlaceholder() {
+    if (this.selectedLanguage === 'QASM2') {
+      this.placeholderCircuit = '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';
+    } else if (this.selectedLanguage === 'QASM3') {
+      this.placeholderCircuit = 'OPENQASM 3.0;\nbit[2] bits;\nqubit[2] qubits;\nh qubits[0];\ncnot qubits[0], qubits[1];\nbits[0] = measure qubits[0];\nbits[1] = measure qubits[1];';
+    } else if (this.selectedLanguage === 'QISKIT'){
+      this.placeholderCircuit = 'circuit = QuantumCircuit(2, 2);\ncircuit.h(0);\ncircuit.cx(0, 1);\ncircuit.measure(0, 0);\ncircuit.measure(1, 1)';
+    } else if (this.selectedLanguage === 'BRAKET'){
+      this.placeholderCircuit = 'Circuit().h(0).cnot(0, 1)';
+    }
+  }
 }