advancing

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 172.27.0.1 --port 9000 --proxy-config proxy.conf.json",
-    "build": "ng build --prod --output-hashing=none --aot --deleteOutputPath --build-optimizer --deploy-url /static/modern",
+    "build": "ng build --prod --output-hashing=none --aot --deleteOutputPath --build-optimizer --deploy-url /static/modern --base-href /modern",
     "postbuild": "python3 toUDS.py",
     "test": "ng test",
     "lint": "ng lint",

src/app/app-routing.module.ts

@@ -1,7 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { LoginComponent } from './login/login.component';
+import { ClientDownloadComponent } from './client-download/client-download.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/login', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
+  { path: 'client-download', component: ClientDownloadComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.css

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

src/app/app.component.html

@@ -1,17 +1,2 @@
 <uds-navbar></uds-navbar>
-<div class="container">
-  <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0,ngb-panel-1">
-    <ngb-panel title="Title1">
-      <ng-template ngbPanelContent>
-        Content1
-      </ng-template>
-    </ngb-panel>
-    <ngb-panel title="Title2">
-      <ng-template ngbPanelContent udsTranslate>
-        <uds-translate>Close</uds-translate>
-      </ng-template>
-    </ngb-panel>
-  </ngb-accordion>
-</div>
-
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -11,13 +11,17 @@ import { TranslateDirective } from './translate.directive';
 
 // Service providers
 import { UdsApiService } from './uds-api.service';
+import { LoginComponent } from './login/login.component';
+import { ClientDownloadComponent } from './client-download/client-download.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
-    TranslateDirective
+    TranslateDirective,
+    LoginComponent,
+    ClientDownloadComponent
   ],
   imports: [
     BrowserModule,

src/app/client-download/client-download.component.css

@@ -0,0 +1,4 @@
+.card {
+    min-width: 12rem;
+    max-width: 12rem;
+}

src/app/client-download/client-download.component.html

@@ -0,0 +1,16 @@
+    <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+      <h1 class="display-4"><uds-translate>UDS Plugin</uds-translate></h1>
+      <p class="lead"><uds-translate>Download uds plugin for your platform</uds-translate></p>
+    </div>
+
+    <div class="container">
+      <div class="card-deck mb-3">
+        <div class="card mb-4" *ngFor="let p of plugins">
+            <img class="card-img-top" src="/img/{{ p.os }}.png">
+          <div class="card-body d-flex flex-column">
+            <h4 class="card-title">{{ p.os }}</h4>
+            <p class="card-text">{{ p.description }}</p>
+            <a class="btn btn-lg btn-block btn-outline-primary mt-auto" href="{{ p.url }}">Download</a>
+          </div>
+        </div>
+      </div>

src/app/client-download/client-download.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { UdsApiService, Plugin } from '../uds-api.service';
+
+@Component({
+  selector: 'uds-client-download',
+  templateUrl: './client-download.component.html',
+  styleUrls: ['./client-download.component.css']
+})
+export class ClientDownloadComponent implements OnInit {
+
+  plugins: Plugin[];
+
+  constructor(api: UdsApiService) {
+    this.plugins = api.getPlugins();
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/login/login.component.html

@@ -0,0 +1,3 @@
+<p>
+  login works!
+</p>

src/app/login/login.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'uds-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/navbar/navbar.component.html

@@ -9,7 +9,7 @@
   <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarsExampleDefault">
     <ul class="navbar-nav ml-auto">
       <li class="nav-item">
-        <a class="nav-link" href="#"><i class="fa fa-download"></i> UDS Plugin</a>
+        <a class="nav-link" routerLink="/client-download"><i class="fa fa-download"></i> UDS Plugin</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#"><uds-translate>About</uds-translate></a>

src/app/uds-api.service.ts

@@ -6,20 +6,26 @@ export interface Lang {
   name: string;
 }
 
+export interface Plugin {
+  url: string;
+  description: string;
+  os: string;
+}
+
 @Injectable()
 export class UdsApiService {
 
   constructor(private http: HttpClient) { }
 
   getCurrentLanguage(): string {
-    return udsConfig.language;
+    return udsData.config.language;
   }
 
   getAvailableLanguages(): Lang[] {
-    const res: Lang[] = [];
-    for (const entry of udsConfig.available_languages) {
-      res.push(entry);
-    }
-    return res;
+    return udsData.config.available_languages;
+  }
+
+  getPlugins(): Plugin[] {
+    return udsData.plugins;
   }
 }

src/server/uds.js

@@ -1,31 +1,59 @@
-var udsConfig = {
-    "language": "en",
+var udsData = {
+  "config": {
     "available_languages": [{
-      "name": "Spanish",
-      "id": "es"
+      "id": "es",
+      "name": "Spanish"
     }, {
-      "name": "English",
-      "id": "en"
+      "id": "en",
+      "name": "English"
     }, {
-      "name": "French",
-      "id": "fr"
+      "id": "fr",
+      "name": "French"
     }, {
-      "name": "German",
-      "id": "de"
+      "id": "de",
+      "name": "German"
     }, {
-      "name": "Portuguese",
-      "id": "pt"
+      "id": "pt",
+      "name": "Portuguese"
     }, {
-      "name": "Italian",
-      "id": "it"
+      "id": "it",
+      "name": "Italian"
     }, {
-      "name": "Basque",
-      "id": "eu"
+      "id": "eu",
+      "name": "Basque"
     }, {
-      "name": "Arabian",
-      "id": "ar"
+      "id": "ar",
+      "name": "Arabian"
     }, {
-      "name": "Catalan",
-      "id": "ca"
-    }]
-  };
+      "id": "ca",
+      "name": "Catalan"
+    }],
+    "language": "en",
+    "os": "Windows"
+  },
+  "plugins": [{
+    "description": "Windows plugin",
+    "url": "/static/clients/UDSClientSetup-3.x.x-DEVEL.exe",
+    "os": "Windows"
+  }, {
+    "description": "Mac OS X plugin",
+    "url": "/static/clients/UDSClient-3.x.x-DEVEL.pkg",
+    "os": "MacOS"
+  }, {
+    "description": "Debian based Linux (requires Python-2.7)",
+    "url": "/static/udsclient_3.x.x-DEVEL_all.deb",
+    "os": "Linux"
+  }, {
+    "description": "Red Hat based Linux (RH, Fedora, Centos, ...) (requires Python-2.7)",
+    "url": "/static/udsclient-3.x.x-DEVEL-1.noarch.rpm",
+    "os": "Linux"
+  }, {
+    "description": "Suse based Linux (requires Python-2.7)",
+    "url": "/static/udsclient-opensuse-3.x.x-DEVEL-1.noarch.rpm",
+    "os": "Linux"
+  }, {
+    "description": "Generic .tar.gz Linux (requires Python-2.7)",
+    "url": "/static/udsclient-3.x.x-DEVEL.tar.gz",
+    "os": "Linux"
+  }]
+};

src/styles.css

@@ -1,3 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~bootstrap/dist/css/bootstrap.css";
 @import "~font-awesome/css/font-awesome.css";
+
+body {
+    margin-top: 4rem;
+}

src/typings.d.ts

@@ -5,4 +5,5 @@ interface NodeModule {
 }
 /* UDS injected modules */
 declare var django:any;
-declare var udsConfig:any;
+declare var udsData:any;
+

toUDS.py

@@ -66,7 +66,7 @@ def locateHtmlFiles():
 def fixIndex():
     print('Fixing index.html...')
     translations = '<script type="text/javascript" src="{% url \'uds.web.views.jsCatalog\' LANGUAGE_CODE %}"></script>'
-    jsdata = '<script type="text/javascript" src="{% url \'modern.js\' %}"></script>'
+    jsdata = '<script type="text/javascript" src="{% url \'uds.js\' %}"></script>'
     # Change index.html, to include django required staff
     translatePattern = re.compile(
         '<!-- DYNAMIC_DATA -->.*<!-- ENDDYNAMIC_DATA -->', re.MULTILINE | re.DOTALL)