X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?a=blobdiff_plain;f=webapp%2Fsrc%2Fapp%2Fhome%2Fhome.component.ts;fp=webapp%2Fsrc%2Fapp%2Fhome%2Fhome.component.ts;h=0e3c9958cd5ec08cf23df94fd24e800365a44ee2;hb=97ca1f277dc8b6973d6fa67add5593a9c395ce60;hp=0000000000000000000000000000000000000000;hpb=12a20d0905b0d3e7e0f4c9ec8ee619f683256d71;p=src%2Fxds%2Fxds-agent.git

diff --git a/webapp/src/app/home/home.component.ts b/webapp/src/app/home/home.component.ts
new file mode 100644
index 0000000..0e3c995
--- /dev/null
+++ b/webapp/src/app/home/home.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+
+export interface ISlide {
+    img?: string;
+    imgAlt?: string;
+    hText?: string;
+    hHtml?: string;
+    text?: string;
+    html?: string;
+    btn?: string;
+    btnHref?: string;
+}
+
+@Component({
+    selector: 'home',
+    moduleId: module.id,
+    template: `
+        <style>
+            .wide img {
+                width: 98%;
+            }
+            .carousel-item {
+                max-height: 90%;
+            }
+            h1, h2, h3, h4, p {
+                color: #330066;
+            }
+            .html-inner {
+                color: #330066;
+            }
+            h1 {
+                font-size: 4em;
+            }
+            p {
+                font-size: 2.5em;
+            }
+
+        </style>
+
+        <div class="wide">
+            <carousel [interval]="carInterval" [(activeSlide)]="activeSlideIndex">
+                <slide *ngFor="let sl of slides; let index=index">
+                    <img [src]="sl.img" [alt]="sl.imgAlt">
+                    <div class="carousel-caption">
+                        <h1 *ngIf="sl.hText">{{ sl.hText }}</h1>
+                        <h1 *ngIf="sl.hHtml" class="html-inner" [innerHtml]="sl.hHtml"></h1>
+                        <p   *ngIf="sl.text">{{ sl.text }}</p>
+                        <div *ngIf="sl.html" class="html-inner" [innerHtml]="sl.html"></div>
+                    </div>
+                </slide>
+            </carousel>
+        </div>
+    `
+})
+
+export class HomeComponent {
+
+    public carInterval: number = 4000;
+
+    // FIXME SEB - Add more slides and info
+    public slides: ISlide[] = [
+        {
+            img: 'assets/images/iot-graphx.jpg',
+            imgAlt: "iot graphx image",
+            hText: "Welcome to XDS Dashboard !",
+            text: "X(cross) Development System allows developers to easily cross-compile applications.",
+        },
+        {
+            img: 'assets/images/iot-graphx.jpg',
+            imgAlt: "iot graphx image",
+            hText: "Create, Build, Deploy, Enjoy !",
+        },
+        {
+            img: 'assets/images/iot-graphx.jpg',
+            imgAlt: "iot graphx image",
+            hHtml: '<p>To Start: click on <i class="fa fa-cog" style="color:#9d9d9d;"></i> icon and add new folder</p>',
+        }
+    ];
+
+    constructor() { }
+}
\ No newline at end of file