From 0a9826806b26fd179b739bd2c1ca9fcb114e321f Mon Sep 17 00:00:00 2001
From: Sebastien Douheret <sebastien.douheret@iot.bzh>
Date: Thu, 24 Aug 2017 23:18:01 +0200
Subject: Add IoT logo and change top bar color.

---
 webapp/assets/images/iot-bzh-logo-small.png     | Bin 0 -> 14449 bytes
 webapp/src/app/app.component.css                |  22 +++++--
 webapp/src/app/app.component.html               |   7 +-
 webapp/src/app/config/config.component.css      |   5 ++
 webapp/src/app/config/config.component.html     |   9 +--
 webapp/src/app/devel/build/build.component.css  |   9 ++-
 webapp/src/app/devel/build/build.component.html |  83 +++++++++++++-----------
 webapp/src/app/devel/build/build.component.ts   |  13 ++--
 webapp/src/app/devel/devel.component.ts         |   7 +-
 webapp/src/index.html                           |   5 +-
 10 files changed, 98 insertions(+), 62 deletions(-)
 create mode 100644 webapp/assets/images/iot-bzh-logo-small.png

(limited to 'webapp')

diff --git a/webapp/assets/images/iot-bzh-logo-small.png b/webapp/assets/images/iot-bzh-logo-small.png
new file mode 100644
index 0000000..2c3b2ae
Binary files /dev/null and b/webapp/assets/images/iot-bzh-logo-small.png differ
diff --git a/webapp/src/app/app.component.css b/webapp/src/app/app.component.css
index 0ec4936..a47ad13 100644
--- a/webapp/src/app/app.component.css
+++ b/webapp/src/app/app.component.css
@@ -1,13 +1,18 @@
-.navbar-inverse  {
-    background-color: #330066;
+.navbar {
+    background-color: whitesmoke;
 }
 
 .navbar-brand {
-    background: #330066;
-    color: white;
     font-size: x-large;
+    font-variant: small-caps;
+    color: #5a28a1;
 }
 
+a.navbar-brand {
+    margin-top: 5px;
+}
+
+
 .navbar-nav ul li a {
     color: #fff;
 }
@@ -15,3 +20,12 @@
 .menu-text {
     color: #fff;
 }
+
+#logo-iot {
+    padding: 0 2px;
+    height: 60px;
+}
+
+li>a {
+    color:#5a28a1;
+}
diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
index b02dbe2..a889b12 100644
--- a/webapp/src/app/app.component.html
+++ b/webapp/src/app/app.component.html
@@ -1,4 +1,5 @@
-<nav class="navbar navbar-fixed-top navbar-inverse">
+<nav class="navbar navbar-fixed-top">
+    <!-- navbar-inverse"> -->
     <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"
@@ -7,6 +8,8 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
+
+            <img class="navbar-brand" id="logo-iot" src="assets/images/iot-bzh-logo-small.png">
             <a class="navbar-brand" href="#">X(cross) Development System Dashboard</a>
         </div>
 
@@ -24,4 +27,4 @@
 
 <div style="margin:10px;">
     <router-outlet></router-outlet>
-</div>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/config/config.component.css b/webapp/src/app/config/config.component.css
index 2bb3fea..6412f9a 100644
--- a/webapp/src/app/config/config.component.css
+++ b/webapp/src/app/config/config.component.css
@@ -1,3 +1,8 @@
+.fa-big {
+    font-size: 20px;
+    font-weight: bold;
+}
+
 .fa-size-x2 {
     font-size: 20px;
 }
diff --git a/webapp/src/app/config/config.component.html b/webapp/src/app/config/config.component.html
index 6af7f0d..369b5c1 100644
--- a/webapp/src/app/config/config.component.html
+++ b/webapp/src/app/config/config.component.html
@@ -6,8 +6,7 @@
                 <span class="fa fa-fw fa-exchange fa-size-x2" [style.color]="((serverStatus$ | async)?.WS_connected)?'green':'red'"></span>
 
                 <button class="btn btn-link" (click)="gConfigIsCollapsed = !gConfigIsCollapsed; $event.stopPropagation()">
-                    <span *ngIf="gConfigIsCollapsed" class="fa fa-angle-double-right fa-size-x2"></span>
-                    <span *ngIf="!gConfigIsCollapsed" class="fa fa-angle-double-down fa-size-x2"></span>
+                    <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': gConfigIsCollapsed, 'fa-angle-double-right': !gConfigIsCollapsed}"></span>
                 </button>
             </div>
         </h2>
@@ -63,8 +62,7 @@
                 <button class="btn btn-link" (click)="childSdkModal.show(); $event.stopPropagation()"><span class="fa fa-plus fa-size-x2"></span></button>
 
                 <button class="btn btn-link" (click)="sdksIsCollapsed = !sdksIsCollapsed; $event.stopPropagation()">
-                    <span *ngIf="sdksIsCollapsed" class="fa fa-angle-double-right fa-size-x2"></span>
-                    <span *ngIf="!sdksIsCollapsed" class="fa fa-angle-double-down fa-size-x2"></span>
+                    <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': sdksIsCollapsed, 'fa-angle-double-right': !sdksIsCollapsed}"></span>
                 </button>
             </div>
         </h2>
@@ -84,8 +82,7 @@
                 <button class="btn btn-link" (click)="childProjectModal.show(); $event.stopPropagation()"><span class="fa fa-plus fa-size-x2"></span></button>
 
                 <button class="btn btn-link" (click)="projectsIsCollapsed = !projectsIsCollapsed; $event.stopPropagation()">
-                        <span *ngIf="projectsIsCollapsed" class="fa fa-angle-double-right fa-size-x2"></span>
-                        <span *ngIf="!projectsIsCollapsed" class="fa fa-angle-double-down fa-size-x2"></span>
+                       <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': projectsIsCollapsed, 'fa-angle-double-right': !projectsIsCollapsed}"></span>
                 </button>
             </div>
         </h2>
diff --git a/webapp/src/app/devel/build/build.component.css b/webapp/src/app/devel/build/build.component.css
index 92f953e..695a89b 100644
--- a/webapp/src/app/devel/build/build.component.css
+++ b/webapp/src/app/devel/build/build.component.css
@@ -33,8 +33,9 @@
     width: 10em;
 }
 
-.fa-size-x2 {
+.fa-big {
     font-size: 18px;
+    font-weight: bold;
 }
 
 .textarea-scroll {
@@ -46,4 +47,8 @@ h2 {
     font-family: sans-serif;
     font-variant: small-caps;
     font-size: x-large;
-}
\ No newline at end of file
+}
+
+.panel-heading {
+    background: aliceblue;
+}
diff --git a/webapp/src/app/devel/build/build.component.html b/webapp/src/app/devel/build/build.component.html
index a66231c..2bcd2c7 100644
--- a/webapp/src/app/devel/build/build.component.html
+++ b/webapp/src/app/devel/build/build.component.html
@@ -1,8 +1,15 @@
 <div class="panel panel-default">
     <div class="panel-heading">
-        <h2 class="panel-title">Build</h2>
+        <h2 class="panel-title" (click)="buildIsCollapsed = !buildIsCollapsed">
+            Build
+            <div class="pull-right">
+                <button class="btn btn-link" (click)="buildIsCollapsed = !buildIsCollapsed; $event.stopPropagation()">
+                    <span class="fa fa-big" [ngClass]="{'fa-angle-double-down': buildIsCollapsed, 'fa-angle-double-right': !buildIsCollapsed}"></span>
+                </button>
+            </div>
+        </h2>
     </div>
-    <div class="panel-body">
+    <div class="panel-body" [collapse]="buildIsCollapsed">
         <form [formGroup]="buildForm">
             <div class="col-xs-12">
                 <table class="table table-borderless table-center">
@@ -26,43 +33,43 @@
                         </tr>
                         <tr>
                             <td colspan="2">
-                            <accordion>
-                                <accordion-group #group>
-                                    <div accordion-heading>
-                                        Advanced Settings
-                                        <i class="pull-right float-xs-right fa" [ngClass]="{'fa-chevron-down': group.isOpen, 'fa-chevron-right': !group.isOpen}"></i>
-                                    </div>
+                                <accordion>
+                                    <accordion-group #group>
+                                        <div accordion-heading>
+                                            Advanced Settings
+                                            <i class="pull-right float-xs-right fa" [ngClass]="{'fa-chevron-down': group.isOpen, 'fa-chevron-right': !group.isOpen}"></i>
+                                        </div>
 
-                                    <table class="table table-borderless table-in-accordion">
-                                        <tbody>
-                                            <tr>
-                                                <th>Clean Command</th>
-                                                <td> <input type="text" style="width:99%;" formControlName="cmdClean"> </td>
-                                            </tr>
-                                            <tr>
-                                                <th>Pre-Build Command</th>
-                                                <td> <input type="text" style="width:99%;" formControlName="cmdPrebuild"> </td>
-                                            </tr>
-                                            <tr>
-                                                <th>Build Command</th>
-                                                <td> <input type="text" style="width:99%;" formControlName="cmdBuild"> </td>
-                                            </tr>
-                                            <tr>
-                                                <th>Populate Command</th>
-                                                <td> <input type="text" style="width:99%;" formControlName="cmdPopulate"> </td>
-                                            </tr>
-                                            <tr>
-                                                <th>Env variables</th>
-                                                <td> <input type="text" style="width:99%;" formControlName="envVars"> </td>
-                                            </tr>
-                                            <tr *ngIf="debugEnable">
-                                                <th>Args variables</th>
-                                                <td> <input type="text" style="width:99%;" formControlName="cmdArgs"> </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </accordion-group>
-                            </accordion>
+                                        <table class="table table-borderless table-in-accordion">
+                                            <tbody>
+                                                <tr>
+                                                    <th>Clean Command</th>
+                                                    <td> <input type="text" style="width:99%;" formControlName="cmdClean"> </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Pre-Build Command</th>
+                                                    <td> <input type="text" style="width:99%;" formControlName="cmdPrebuild">                                                        </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Build Command</th>
+                                                    <td> <input type="text" style="width:99%;" formControlName="cmdBuild"> </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Populate Command</th>
+                                                    <td> <input type="text" style="width:99%;" formControlName="cmdPopulate">                                                        </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>Env variables</th>
+                                                    <td> <input type="text" style="width:99%;" formControlName="envVars"> </td>
+                                                </tr>
+                                                <tr *ngIf="debugEnable">
+                                                    <th>Args variables</th>
+                                                    <td> <input type="text" style="width:99%;" formControlName="cmdArgs"> </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </accordion-group>
+                                </accordion>
                             </td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/app/devel/build/build.component.ts b/webapp/src/app/devel/build/build.component.ts
index 449c557..48a5824 100644
--- a/webapp/src/app/devel/build/build.component.ts
+++ b/webapp/src/app/devel/build/build.component.ts
@@ -23,10 +23,10 @@ export class BuildComponent implements OnInit, AfterViewChecked {
 
     @Input() curProject: IProject;
 
-    buildForm: FormGroup;
-    subpathCtrl = new FormControl("", Validators.required);
-    debugEnable: boolean = false;
-
+    public buildForm: FormGroup;
+    public subpathCtrl = new FormControl("", Validators.required);
+    public debugEnable: boolean = false;
+    public buildIsCollapsed: boolean = false;
     public cmdOutput: string;
     public cmdInfo: string;
 
@@ -67,7 +67,8 @@ export class BuildComponent implements OnInit, AfterViewChecked {
 
         // Command output data tunneling
         this.xdsSvr.CmdOutput$.subscribe(data => {
-            this.cmdOutput += data.stdout + "\n";
+            this.cmdOutput += data.stdout;
+            this.cmdOutput += data.stderr;
         });
 
         // Command exit
@@ -219,4 +220,4 @@ export class BuildComponent implements OnInit, AfterViewChecked {
     private _outputFooter(): string {
         return "\n";
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/src/app/devel/devel.component.ts b/webapp/src/app/devel/devel.component.ts
index ff12127..f40f25f 100644
--- a/webapp/src/app/devel/devel.component.ts
+++ b/webapp/src/app/devel/devel.component.ts
@@ -22,11 +22,14 @@ export class DevelComponent {
     ngOnInit() {
         this.config$ = this.configSvr.conf;
         this.config$.subscribe((cfg) => {
-            if ("projects" in cfg) {
+            // Select project if no one is selected or no project exists
+            if (this.curPrj && "id" in this.curPrj) {
+                this.curPrj = cfg.projects.find(p => p.id === this.curPrj.id) || cfg.projects[0];
+            } else if (this.curPrj == null && "projects" in cfg) {
                 this.curPrj = cfg.projects[0];
             } else {
                 this.curPrj = null;
             }
         });
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/src/index.html b/webapp/src/index.html
index 33e5efd..290b4be 100644
--- a/webapp/src/index.html
+++ b/webapp/src/index.html
@@ -40,10 +40,11 @@
 <body style="padding-top: 70px;">   <!-- padding needed due to fixed navbar -->
     <app>
         <div style="text-align:center; position:absolute; top:50%; width:100%; transform:translate(0,-50%);">
-            Loading...
+            <img id="logo-iot" src="assets/images/iot-bzh-logo-small.png">
+            <br> Loading...
             <i class="fa fa-spinner fa-spin fa-fw"></i>
         </div>
     </app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
-- 
cgit 1.2.3-korg