Bootstraping

.angular-cli.json

@@ -8,7 +8,7 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
-        "assets",
+        "img",
         "i18n",
         "favicon.ico"
       ],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "uds",
-  "version": "0.0.0",
+  "version": "3.0.0",
-  "license": "MIT",
+  "license": "BSD-3-Clause",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 172.27.0.1 --port 9000",

src/app/app.component.css

@@ -0,0 +1,3 @@
+.container {
+    margin-top: 64px;
+}

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NavbarComponent } from './navbar/navbar.component';
 import { TranslateDirective } from './translate.directive';
 
+// Service providers
+import { UdsApiService } from './uds-api.service';
 
 @NgModule({
   declarations: [
@@ -22,7 +24,7 @@ import { TranslateDirective } from './translate.directive';
     AppRoutingModule,
     NgbModule.forRoot()
   ],
-  providers: [],
+  providers: [UdsApiService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/navbar/navbar.component.css

@@ -0,0 +1,10 @@
+a.dropdown-toggle {
+    cursor: pointer;
+}
+
+.navbar-img {
+
+    width: 2em;
+    margin-top: -8px;
+
+}

src/app/navbar/navbar.component.html

@@ -1,18 +1,18 @@
 <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
   <a class="navbar-brand" href="#">
-      <img alt="Universal Desktop Services" src="/assets/udsicon.png" class="navbar-img pull-left">
+      <img alt="Universal Desktop Services" src="/img/udsicon.png" class="navbar-img pull-left">
       Universal Desktop Services
   </a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarsExampleDefault">
     <ul class="navbar-nav ml-auto">
       <li class="nav-item">
-        <a class="nav-link" href="#">UDS Plugin</a>
+        <a class="nav-link" href="#"><i class="fa fa-download"></i> UDS Plugin</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">About</a>
+        <a class="nav-link" href="#"><uds-translate>About</uds-translate></a>
       </li>
       <li class="nav-item dropdown" ngbDropdown>
         <a class="nav-link dropdown-toggle" id="dropdown01" ngbDropdownToggle>{{ lang }}</a>

src/app/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { UdsApiService, Lang } from '../uds-api.service';
 
 @Component({
   selector: 'uds-navbar',
@@ -7,7 +8,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavbarComponent implements OnInit {
 
-  constructor() { }
+  lang: string; // Current language
+  langs: Lang[]; // Available languages
+  isNavbarCollapsed = true;
+
+  constructor(api: UdsApiService) {
+    const lang = api.getCurrentLanguage();
+    this.langs = [];
+    for (const l of api.getAvailableLanguages()) {
+      if (l.id === lang) {
+        this.lang = l.name;
+      } else {
+        this.langs.push(l);
+      }
+    }
+  }
 
   ngOnInit() {
   }

src/app/uds-api.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+export interface Lang {
+  id: string;
+  name: string;
+}
+
+@Injectable()
+export class UdsApiService {
+
+  constructor(private http: HttpClient) { }
+
+  getCurrentLanguage(): string {
+    return udsConfig.language;
+  }
+
+  getAvailableLanguages(): Lang[] {
+    const res: Lang[] = [];
+    for (const entry of udsConfig.available_languages) {
+      res.push(entry);
+    }
+    return res;
+  }
+}

src/i18n/es.js

@@ -22,6 +22,7 @@
   var newcatalog = {
     "(filtered from _MAX_ total records)": "(registros filtrados de un total de _MAX_)", 
     "(no days)": "(sin d\u00edas)", 
+    "About": "Acerca",
     "Accept": "Aceptar", 
     "Access calendar removal error": "Error en el borrado del calendario de acceso", 
     "Active": "Activo", 

src/polyfills.ts

@@ -19,20 +19,20 @@
  */
 
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
+import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
+import 'core-js/es6/object';
-// import 'core-js/es6/function';
+import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
+import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
+import 'core-js/es6/number';
-// import 'core-js/es6/math';
+import 'core-js/es6/math';
-// import 'core-js/es6/string';
+import 'core-js/es6/string';
-// import 'core-js/es6/date';
+import 'core-js/es6/date';
-// import 'core-js/es6/array';
+import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
+import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
+import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
+import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
+import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.

src/styles.css

@@ -1,2 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
-@import "~bootstrap/dist/css/bootstrap.css"
+@import "~bootstrap/dist/css/bootstrap.css";
+@import "~font-awesome/css/font-awesome.css";