Component lista-eventi, personalizzazione

30 Nov Component lista-eventi, personalizzazione

Posted at 14:35h in full stack web app by
0 Likes

Come indica il nome, questo Component servirà per visualizzare la lista degli eventi di ballo.

Come ogni Component è definito da 4 file:

il file html si occupa del COME  i dati verranno visualizzati, nel senso strutturale. Come sono posizionati i vari elementi grafici, uno rispetto all’altro.

il file css, contiene i dettagli più “cosmetici” del COME. Ad esempio, tipicamente, spessori delle righe, colori, font, etc.

il file ts invece rappresenta il COSA: contiene lo script in cui sono valorizzate le variabili che contengono i dati.

Il file spec.ts serve invece per il test. Si tratta di un argomento specifico, non essenziale per la comprensione del funzionamento di Angular in questa fase. Il Test è poi un argomento tanto importante e corposo che decidiamo per una trattazione a parte in seguito.

Per abbellire il nostro html, per disegnare la tabella degli eventi, abbiamo deciso di utilizzare una libreria javascript molto usata: Angular Material. Essa contiene  diversi componenti grafici molto utili e le API per gestire gli eventi ad essi associati. Quindi se non non lo abbiamo fatto in precedenza dobbiamo includere questa libreria; poi sarà disponibile anche per gli altri Component del progetto.

Riassumento, ecco in sintesi le operazioni che ci spettano:

    1. installazione di Material (una tantum);
    2. modifica del file .ts;
    3. modifica del file .html;
    4. modifica del file .css;

INSTALLAZIONE DI MATERIAL

Dalla nostra shell digitiamo il seguente comando:

ng add @angular/material

Alle domande di personalizzazione dell’installazione che ci vengono poste rispondiamo come da default, in particolare HammerJs=Y e browser_animation=Y. 

MODIFICA DEL FILE lista-eventi.component.ts

Modifichiamo il file  inserendovi le inizializzazioni delle variabili. Quella coi dati da visualizzare e quella coi titoli delle colonne della tabella in cui i dati saranno visualizzati. (I dati relativi agli eventi sono in formato json )

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-lista-eventi',
  templateUrl: './lista-eventi.component.html',
  styleUrls: ['./lista-eventi.component.css']
})
export class ListaEventiComponent implements OnInit {
 
  datiListaEventi = [
    {
      id: 13,
      name: "Swing Fastival",
      country: "United Kingdom",
      town: "Torquay, Devon ",
      site2: "http://www.swingfastival.co.uk",
      styles: "Balboa, Shag",
      startdate: "2019-11-08",
      stopdate: "2019-11-10"
    },
    {
      id: 14,
      name: "Boulevard Blues",
      country: "Belgium",
      town: "Hasselt",
      site2: "www.boulevardblues.be ",
      styles: "Blues",
      startdate: "2019-11-08",
      stopdate: "2019-11-11"
    },
    {
      id: 124,
      name: "Montpellier Balboa Rendez-Vous",
      country: "France",
      town: "Montpellier",
      site2: "http://www.swingcatcie.com/montpellier-balboa-rendezvous/",
      styles: "Balboa, Shag",
      startdate: "2020-02-14",
      stopdate: "2020-02-16"
    },
    {
      id: 125,
      name: "Holy lollies",
      country: "France",
      town: "Strasbourg",
      site2: "http://www.holylollies.fr",
      styles: "Balboa",
      startdate: "2020-02-14",
      stopdate: "2020-02-16"
    },
    {
      id: 208,
      name: "Black Forest Hop",
      country: "Germany",
      town: "Freiburg",
      site2: "http://www.blackforesthop.com",
      styles: "Lindy Hop",
      startdate: "2020-06-05",
      stopdate: "2020-06-07"
    },
    {
      id: 223,
      name: "JazzOut SwingFest",
      country: "Netherlands",
      town: "Nijmegen",
      site2: "http://www.jazzoutswingfest.com/",
      styles: "Jazz, Lindy Hop",
      startdate: "2020-08-28",
      stopdate: "2020-08-30"
    },
    {
      id: 224,
      name: "Shirt Tail Stompers 10 Year Aniversary Weekend",
      country: "Lithuania",
      town: "Vilnius",
      site2: "https://www.facebook.com/events/2981610321881346/",
      styles: "Balboa, Charleston, Jazz, Lindy Hop, Shag",
      startdate: "2020-08-28",
      stopdate: "2020-08-30"
    },
    {
      id: 225,
      name: "Swinging and Sail",
      country: "Greece",
      town: "Athens - Ithaca",
      site2: "http://www.swingnsail.com",
      styles: "Lindy Hop",
      startdate: "2020-08-28",
      stopdate: "2020-09-05"
    },
    {
      id: 226,
      name: "Madrid in Pulse",
      country: "Spain",
      town: "Madrid",
      site2: "http://www.madridinpulse.es/?lang=en",
      styles: "Balboa",
      startdate: "2020-09-04",
      stopdate: "2020-09-06"
    }
  ];
 
    displayedColumns: string[] = ['evento', 'luogo' , 'balli', 'inizio', 'fine'];
 
    constructor() {
       /*
       console.log(JSON.stringify(this.datiListaEventi));
       */
       for (let x in this.datiListaEventi) {
           console.log(
              "evento: " + JSON.stringify(this.datiListaEventi[x])
           );
       }
   }
 
    ngOnInit() {
    }
 
}

MODIFICA DEL FILE lista-eventi.component.html

Sostituiamo tutto il precedente contenuto del file  con il seguente, che utilizza gli attributi di Angular-Material per disegnare la tabella che ci serve.

  <div class="inner-list">
 
      <table mat-table [dataSource]="datiListaEventi" class="event-table"
             matSort matSortActive="startdate" matSortDisableClear matSortDirection="asc">
 
        <ng-container matColumnDef="evento">
          <th  mat-header-cell  *matHeaderCellDef>Evento</th>
          <td mat-cell *matCellDef="let row">{{row.name}}</td>
        </ng-container>
 
        <ng-container matColumnDef="luogo">
          <th mat-header-cell *matHeaderCellDef>Luogo</th>
          <td mat-cell *matCellDef="let row">{{row.country}} / {{row.town}}</td>
        </ng-container>
 
        <ng-container matColumnDef="balli">
          <th mat-header-cell *matHeaderCellDef>Balli</th>
          <td mat-cell *matCellDef="let row">{{row.styles}}</td>
        </ng-container>
 
        <ng-container matColumnDef="inizio">
          <th mat-header-cell *matHeaderCellDef>Inizio</th>
          <td mat-cell *matCellDef="let row">{{row.startdate}}</td>
        </ng-container>
 
        <ng-container matColumnDef="fine">
          <th mat-header-cell *matHeaderCellDef>Fine</th>
          <td mat-cell *matCellDef="let row">{{row.stopdate}}</td>
        </ng-container>
 
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
 
    </div>

MODIFICA DEL FILE lista-eventi.component.css

Inseriamo qualche prima personalizzazione estetica della tabella.

table {
  width: 100%;
  align-content: center;
}

table td {
  padding: 10px;
}

.eventi-container {
  position: relative;
  padding: 20px;
}

.example-loading-shade {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 56px;
  right: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-column-number,
.mat-column-state {
  max-width: 64px;
}

.mat-column-created {
  max-width: 124px;
}

.mat-flat-button {
  margin: 5px;
}

.example-fill-remaining-space {
  /* This fills the remaining space, by using flexbox.
     Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

div#div1{
  height:45px;width:200px;
  background:yellow;
  float:right;
}
 
div.inner-list {
  position: relative;
  left: 10%;
  width: 80%;
  /* border: 3px solid #FF9900; */
  font-family: 'Courier New', Courier, monospace;
  font-size: xx-large;
}

MODIFICA DEL FILE styles.css

Come già accennato, nella root del progetto si trova  il file styles.css che definisce e riunisce in se’ gli stili estetici di tutta l’applicazione Angular. Modifichiamolo per intero come segue, incorporando anche la definizione degli stili che ci saranno utili in seguito, per gli altri componenti.

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background: darkcyan;
  color: brown;
}

header {
  background-color: #005588;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  font-size: 35px;
  width: 100%;
  color: white;
}

footer {
  background-color: #005588;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white;
  width: 100%;
}

div.external {
  position: relative;
  width: 100%;
  border: 3px solid #73ad21;
}

div.inner-single {
  position: relative;
  left: 20%;
  width: 60%;
  /* border: 3px solid #FF9900; */
}

a:link {
  color: yellow;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: #005588;
}

.mat-card {
  /* background: cornflowerblue; */
  background: burlywood;
}

mat-form-field.mat-form-field {
  font-size: 22px;
  color: brown;
}

.button-row {
  background: darkred;
}

mat-form-field.mat-form-field-modify {
  width: 100%;
}

Se il server Angular è ancora in funzione, ad ogni modifica dei files, avviene una ricompilazione automatica dei sorgenti e il ri-run dell’applicazione, con conseguente aggiornamento nel browser. In alternativa dalla nostra shell ri-inseriamo il comando ng serve e controlliamo nel browser come si è modificata la nostra app.

No Comments

Sorry, the comment form is closed at this time.