Allow to set make arguments and rework build page.

3 files changed, 88 insertions, 49 deletions

diff --git a/webapp/src/app/build/build.component.css b/webapp/src/app/build/build.component.css
index 5bfc898..11784db 100644
--- a/webapp/src/app/build/build.component.css
+++ b/webapp/src/app/build/build.component.css
@@ -6,5 +6,28 @@
 .blocks .btn-primary {
     margin-left: 5px;
     margin-right: 5px;
+    margin-top: 5px;
     border-radius: 4px !important;
+}
+
+.table-borderless>tbody>tr>td,
+.table-borderless>tbody>tr>th,
+.table-borderless>tfoot>tr>td,
+.table-borderless>tfoot>tr>th,
+.table-borderless>thead>tr>td,
+.table-borderless>thead>tr>th {
+    border: none;
+}
+
+.btn-large {
+    width: 10em;
+}
+
+.fa-size-x2 {
+    font-size: 18px;
+}
+
+.textarea-scroll {
+    width: 100%;
+    overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/webapp/src/app/build/build.component.html b/webapp/src/app/build/build.component.html
index 2ab7821..3d866f3 100644
--- a/webapp/src/app/build/build.component.html
+++ b/webapp/src/app/build/build.component.html
@@ -1,60 +1,71 @@
 <form [formGroup]="buildForm">
-    <div class="row">
-        <div class="col-xs-6">
-            <label>Project </label>
-            <div class="btn-group" dropdown *ngIf="curProject">
-                <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" style="width: 14em;">
-                    {{curProject.label}} <span class="caret" style="float: right; margin-top: 8px;"></span>
-                </button>
-                <ul *dropdownMenu class="dropdown-menu" role="menu">
-                    <li role="menuitem"><a class="dropdown-item" *ngFor="let prj of (config$ | async)?.projects" (click)="curProject=prj">
-                        {{prj.label}}</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <div class="col-xs-6" style="padding-right: 3em;">
-            <div class="btn-group blocks pull-right">
-                <button class="btn btn-primary " (click)="make() " [disabled]="!confValid ">Build</button>
-                <button class="btn btn-primary " (click)="make('clean') " [disabled]="!confValid ">Clean</button>
-            </div>
-        </div>
+    <div class="col-xs-12">
+        <table class="table table-borderless">
+            <tbody>
+                <tr>
+                    <th style="border: none;">Project</th>
+                    <td>
+                        <div class="btn-group" dropdown *ngIf="curProject">
+                            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" style="width: 20em;">
+                            {{curProject.label}} <span class="caret" style="float: right; margin-top: 8px;"></span>
+                        </button>
+                            <ul *dropdownMenu class="dropdown-menu" role="menu">
+                                <li role="menuitem"><a class="dropdown-item" *ngFor="let prj of (config$ | async)?.projects" (click)="curProject=prj">
+                                {{prj.label}}</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <th>Cross SDK</th>
+                    <td>
+                        <!-- FIXME why not working ?
+                        <sdk-select-dropdown [sdks]="(sdks$ | async)"></sdk-select-dropdown>
+                        -->
+                        <sdk-select-dropdown></sdk-select-dropdown>
+                    </td>
+                </tr>
+                <tr>
+                    <th>Sub-directory</th>
+                    <td> <input type="text" style="width:99%;" formControlName="subpath"> </td>
+                </tr>
+                <tr>
+                    <th>Make arguments</th>
+                    <td> <input type="text" style="width:99%;" formControlName="makeArgs"> </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
-    &nbsp;
     <div class="row">
-        <div class="col-xs-8">
-            <label>Cross SDK </label>
-            <!-- FIXME why not working ?
-                    <sdk-select-dropdown [sdks]="(sdks$ | async)"></sdk-select-dropdown>
-                    -->
-            <sdk-select-dropdown></sdk-select-dropdown>
-        </div>
-    </div>
-    &nbsp;
-    <div class="row ">
-        <div class="col-xs-8 pull-left ">
-            <label>Sub-directory</label>
-            <input type="text" style="width:70%;" formControlName="subpath">
+        <div class="col-xs-12 text-center">
+            <div class="btn-group blocks">
+                <button class="btn btn-primary btn-large" (click)="make() " [disabled]="!confValid ">Build</button>
+                <button class="btn btn-primary btn-large" (click)="make('clean') " [disabled]="!confValid ">Clean</button>
+            </div>
         </div>
     </div>
 </form>
 
 <div style="margin-left: 2em; margin-right: 2em; ">
     <div class="row ">
-        <div class="col-xs-12 ">
-            <button class="btn btn-link pull-right " (click)="reset() "><span class="fa fa-eraser " style="font-size:20px; "></span></button>
+        <div class="col-xs-10">
+            <div class="row ">
+                <div class="col-xs-4">
+                    <label>Command Output</label>
+                </div>
+                <div class="col-xs-8" style="font-size:x-small; margin-top:5px;">
+                    {{ cmdInfo }}
+                </div>
+            </div>
         </div>
-    </div>
-
-    <div class="row ">
-        <div class="col-xs-12 text-center ">
-            <textarea rows="30 " style="width:100%; overflow-y: scroll; " #scrollOutput>{{ cmdOutput }}</textarea>
+        <div class="col-xs-2">
+            <button class="btn btn-link pull-right " (click)="reset() "><span class="fa fa-eraser fa-size-x2"></span></button>
         </div>
     </div>
-
     <div class="row ">
-        <div class="col-xs-12 ">
-            {{ cmdInfo }}
+        <div class="col-xs-12 text-center ">
+            <textarea rows="20" class="textarea-scroll" #scrollOutput>{{ cmdOutput }}</textarea>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/build/build.component.ts b/webapp/src/app/build/build.component.ts
index a99a1fe..17e545f 100644
--- a/webapp/src/app/build/build.component.ts
+++ b/webapp/src/app/build/build.component.ts
@@ -42,7 +42,10 @@ export class BuildComponent implements OnInit, AfterViewChecked {
         this.cmdOutput = "";
         this.confValid = false;
         this.cmdInfo = "";      // TODO: to be remove (only for debug)
-        this.buildForm = fb.group({ subpath: this.subpathCtrl });
+        this.buildForm = fb.group({
+            subpath: this.subpathCtrl,
+            makeArgs: ["", Validators.nullValidator],
+        });
     }
 
     ngOnInit() {
@@ -94,12 +97,14 @@ export class BuildComponent implements OnInit, AfterViewChecked {
 
         this.cmdOutput += this._outputHeader();
 
+        let sdkid = this.sdkSvr.getCurrentId();
+
+        let cmdArgs = args ? args : this.buildForm.value.makeArgs;
+
         let t0 = performance.now();
         this.cmdInfo = 'Start build of ' + prjID + ' at ' + t0;
 
-        let sdkid = this.sdkSvr.getCurrentId();
-
-        this.xdsSvr.make(prjID, this.buildForm.value.subpath, args, sdkid)
+        this.xdsSvr.make(prjID, this.buildForm.value.subpath, cmdArgs, sdkid)
             .subscribe(res => {
                 this.startTime.set(String(res.cmdID), t0);
             },