added design, no functionality

UST-QuAntiL · Nov 28, 2023 · 50dcf03 · 50dcf03
1 parent acd95da
commit 50dcf03
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 19 deletions.
diff --git a/src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.html b/src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.html
@@ -8,51 +8,108 @@
 
     <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center">
       <mat-tab label="Submit Deployment">
-        <div class="input-frame">
-          <form (ngSubmit)="submitDeployment()">
-            <input style="width: 100%; height: auto;" [(ngModel)]="userInput" name="userInput"
+        <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];' />
-            <button mat-flat-button color="primary" type="submit">Submit Deployment Definitions</button>
-          </form>
-        </div>
+            -->
+              <textarea [(ngModel)]="userInput" name="userInput" placeholder="OPENQASM 2.0;
+include &quot;qelib1.inc&quot;;
+qreg q[2];
+creg meas[2];
+h q[0];
+cx q[0],q[1];
+barrier q[0],q[1];
+measure q[0] -&gt; meas[0];
+measure q[1] -&gt; meas[1];" rows="10"></textarea>
 
-        <!-- <button mat-flat-button color="primary" (click)="submitDeployment()">Submit Definitions</button> -->
-        <div class="response-frame">
-          <pre>{{ deploymentResponse }}</pre>
-        </div>
+              <div class="radio-group">
+                <label>
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QASM2"
+                    [checked]="selectedLanguage === 'QASM2'" />
+                  QASM2
+                </label>
+                <label>
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QASM3" />
+                  QASM3
+                </label>
+                <label>
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="QISKIT" />
+                  QISKIT
+                </label>
+                <label>
+                  <input type="radio" [(ngModel)]="selectedLanguage" name="language" value="BRAKET" />
+                  BRAKET
+                </label>
+              </div>
 
+              <button mat-flat-button color="primary" type="submit">Submit Deployment Definitions</button>
+            </form>
+          </div>
 
-        <div class="response-frame">
-          <button mat-flat-button color="primary" (click)="getDeployments()">Get Deployments</button>
-          <pre>{{ getDeploymentResponse }}</pre>
-        </div>
+          <!-- <button mat-flat-button color="primary" (click)="submitDeployment()">Submit Definitions</button> -->
+          <div class="response-frame">
+            <p class="description">Deployment Response:</p>
+            <pre>{{ deploymentResponse }}</pre>
+          </div>
 
 
+          <div class="response-frame">
+            <p class="description">Get a list of available deployments:</p>
+            <div class="button-container">
+              <button mat-flat-button color="primary" (click)="getDeployments()">Get Deployments</button>
+            </div>
+            <pre>{{ getDeploymentResponse }}</pre>
+          </div>
+        </div>
+
       </mat-tab>
       <mat-tab label="Invoke Job">
         <div class="input-frame">
           <form (ngSubmit)="invokeJob()">
+            <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" />
+                IBM
+              </label>
+              <label>
+                <input type="radio" [(ngModel)]="selectedPlatform" name="platform" value="AWS" />
+                AWS
+              </label>
+            </div>
             <button mat-flat-button color="primary" type="submit">Invoke Job</button>
           </form>
         </div>
 
+
         <div class="response-frame">
+          <p class="description">Job Response:</p>
           <pre>{{ jobResponse }}</pre>
         </div>
 
         <div class="response-frame">
-          <button mat-flat-button color="primary" (click)="getJobs()">Get Jobs</button>
+          <p class="description">Get a list of Jobs:</p>
+          <div class="button-container">
+            <button mat-flat-button color="primary" (click)="getJobs()">Get Jobs</button>
+          </div>
           <pre>{{ response }}</pre>
         </div>
       </mat-tab>
 
       <mat-tab label="Get Results">
         <!-- <button id="Results" color="primary" (click)="getResults()">Get Results</button> -->
-        <form (ngSubmit)="getResults(jobID)">
-          <input [(ngModel)]="jobID" name="jobID" placeholder=5 />
-          <button mat-flat-button color="primary" type="submit">Get Results</button>
-        </form>
+        <div class="input-frame">
+          <form (ngSubmit)="getResults(jobID)">
+            <p class="description">Get the results by using the Job ID from Step 2:</p>
+            <input [(ngModel)]="jobID" name="jobID" placeholder=5 />
+            <button mat-flat-button color="primary" type="submit">Get Results</button>
+          </form>
+        </div>
         <!-- <app-histogram-plot [counts]="{'0': 2007, '11': 1993}"></app-histogram-plot> -->
         <div class="response-frame">
           <div *ngIf="result">

diff --git a/src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.ts b/src/app/components/qunicorn-service/qunicorn-view/qunicorn-service.component.ts
@@ -17,6 +17,9 @@ export class QunicornAppComponent implements OnInit {
   deploymentID = 3;
   jobID = 3;
 
+  selectedPlatform = ''; // Added property for the selected platform
+  selectedLanguage = 'QASM2';
+
   response: any;
   jobResponse: any;
   deploymentResponse: any;

diff --git a/src/app/components/qunicorn-service/qunicorn-view/qunicorn-view.component.scss b/src/app/components/qunicorn-service/qunicorn-view/qunicorn-view.component.scss
@@ -22,10 +22,30 @@ pre {
     max-height: 200px;
 }
 
+.container {
+    margin-bottom: 20px;
+    /* Add margin between frames */
+}
+
 .input-frame {
     border: 1px solid #ddd;
     padding: 20px;
     margin-top: 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    /* Centers the items vertically */
+    justify-content: center;
+    background-color: #f9f9f9;
+    max-width: 1000px;
+    margin: 0 auto;
+    /* Adjust the width as needed */
+}
+
+.response-frame {
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
     border-radius: 5px;
     /* Centers the items vertically */
     justify-content: center;
@@ -35,6 +55,38 @@ pre {
     /* Adjust the width as needed */
 }
 
+.platform-frame {
+    display: flex;
+    //flex-direction: column;
+    align-items: center;
+    border: 1px solid #ddd;
+    justify-content: center;
+    padding: 20px;
+    margin-top: 20px;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+    max-width: 1000px;
+    margin: 0 auto;
+    /* Adjust the width as needed */
+}
+
+.radio-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.description {
+    margin-bottom: 10px;
+    font-size: 16px;
+    /* Adjust the font size as needed */
+    color: #333;
+    /* Adjust the color as needed */
+    font-weight: bold;
+    line-height: 1.4;
+    /* Adjust the line height as needed for better readability */
+}
+
 form {
     display: flex;
     flex-direction: column;
@@ -59,4 +111,14 @@ button {
     margin: auto;
     justify-content: center;
     text-align: center;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    /* Center horizontally */
+    align-items: center;
+    /* Center vertically */
+    margin-top: 20px;
+    /* Adjust as needed */
 }