webapp/src/app/home/home.component.ts

   1 import { Component, OnInit } from '@angular/core';
   2
   3 export interface ISlide {
   4     img?: string;
   5     imgAlt?: string;
   6     hText?: string;
   7     pText?: string;
   8     btn?: string;
   9     btnHref?: string;
  10 }
  11
  12 @Component({
  13     selector: 'home',
  14     moduleId: module.id,
  15     template: `
  16         <style>
  17             .wide img {
  18                 width: 98%;
  19             }
  20             h1, h2, h3, h4, p {
  21                 color: #330066;
  22             }
  23
  24         </style>
  25         <div class="wide">
  26             <carousel [interval]="carInterval" [(activeSlide)]="activeSlideIndex">
  27                 <slide *ngFor="let sl of slides; let index=index">
  28                     <img [src]="sl.img" [alt]="sl.imgAlt">
  29                     <div class="carousel-caption" *ngIf="sl.hText">
  30                         <h2>{{ sl.hText }}</h2>
  31                         <p>{{ sl.pText }}</p>
  32                     </div>
  33                 </slide>
  34             </carousel>
  35         </div>
  36     `
  37 })
  38
  39 export class HomeComponent {
  40
  41     public carInterval: number = 2000;
  42
  43     // FIXME SEB - Add more slides and info
  44     public slides: ISlide[] = [
  45         {
  46             img: 'assets/images/iot-graphx.jpg',
  47             imgAlt: "iot graphx image",
  48             hText: "Welcome to XDS Dashboard !",
  49             pText: "X(cross) Development System allows developers to easily cross-compile applications.",
  50         },
  51         {
  52             //img: 'assets/images/beige.jpg',
  53             //imgAlt: "beige image",
  54             img: 'assets/images/iot-graphx.jpg',
  55             imgAlt: "iot graphx image",
  56             hText: "Create, Build, Deploy, Enjoy !",
  57             pText: "TODO...",
  58         }
  59     ];
  60
  61     constructor() { }
  62 }