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     hHtml?: string;
   8     text?: string;
   9     html?: string;
  10     btn?: string;
  11     btnHref?: string;
  12 }
  13
  14 @Component({
  15     selector: 'home',
  16     moduleId: module.id,
  17     template: `
  18         <style>
  19             .wide img {
  20                 width: 98%;
  21             }
  22             .carousel-item {
  23                 max-height: 90%;
  24             }
  25             h1, h2, h3, h4, p {
  26                 color: #330066;
  27             }
  28             .html-inner {
  29                 color: #330066;
  30             }
  31             h1 {
  32                 font-size: 4em;
  33             }
  34             p {
  35                 font-size: 2.5em;
  36             }
  37
  38         </style>
  39
  40         <div class="wide">
  41             <carousel [interval]="carInterval" [(activeSlide)]="activeSlideIndex">
  42                 <slide *ngFor="let sl of slides; let index=index">
  43                     <img [src]="sl.img" [alt]="sl.imgAlt">
  44                     <div class="carousel-caption">
  45                         <h1 *ngIf="sl.hText">{{ sl.hText }}</h1>
  46                         <h1 *ngIf="sl.hHtml" class="html-inner" [innerHtml]="sl.hHtml"></h1>
  47                         <p   *ngIf="sl.text">{{ sl.text }}</p>
  48                         <div *ngIf="sl.html" class="html-inner" [innerHtml]="sl.html"></div>
  49                     </div>
  50                 </slide>
  51             </carousel>
  52         </div>
  53     `
  54 })
  55
  56 export class HomeComponent {
  57
  58     public carInterval: number = 4000;
  59
  60     // FIXME SEB - Add more slides and info
  61     public slides: ISlide[] = [
  62         {
  63             img: 'assets/images/iot-graphx.jpg',
  64             imgAlt: "iot graphx image",
  65             hText: "Welcome to XDS Dashboard !",
  66             text: "X(cross) Development System allows developers to easily cross-compile applications.",
  67         },
  68         {
  69             img: 'assets/images/iot-graphx.jpg',
  70             imgAlt: "iot graphx image",
  71             hText: "Create, Build, Deploy, Enjoy !",
  72         },
  73         {
  74             img: 'assets/images/iot-graphx.jpg',
  75             imgAlt: "iot graphx image",
  76             hHtml: '<p>To Start: click on <i class="fa fa-cog" style="color:#9d9d9d;"></i> icon and add new folder</p>',
  77         }
  78     ];
  79
  80     constructor() { }
  81 }