Updates

src/app/pages/about/about-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ExternalAppComponent } from '../external-app/external-app.component';
+import { AboutComponent } from './about.component';
+import { InfoComponent } from './info/info.component';
+import { SiteComponent } from './site/site.component';
+
+
+
+
+const routes: Routes = [{
+    path: '',
+    component: AboutComponent,
+    children: [{
+        path: 'info',
+        component: InfoComponent,
+    }, {
+        path: 'project',
+        component: SiteComponent,
+    }
+    ],
+}];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class AboutRoutingModule { }

src/app/pages/about/about.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-about',
+  template: `
+  <router-outlet></router-outlet>
+`,
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/about/about.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InfoComponent } from './info/info.component';
+import { SiteComponent } from './site/site.component';
+import { AboutComponent } from './about.component';
+import { AboutRoutingModule } from './about-routing.module';
+import { NbCardModule } from '@nebular/theme';
+import { MatCardModule } from '@angular/material/card';
+
+
+
+@NgModule({
+  declarations: [InfoComponent, SiteComponent, AboutComponent],
+  imports: [
+    CommonModule,
+    AboutRoutingModule,
+    NbCardModule,
+    MatCardModule
+  ]
+})
+export class AboutModule { }

src/app/pages/about/info/info.component.html

+<mat-card class="mb-1">
+    <mat-card-header>
+        <mat-card-title>Urbanite Project</mat-card-title>
+        <mat-card-subtitle>A platform that will assist with decision-making in urban transportation and transformation
+        </mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+        <p>
+            In recent years, with the population and size of cities increasing exponentially, transportation has become
+            even more important. The need for more efficient mobility solutions has been met with a variety of new
+            concepts like sharing vehicles, electric scooters for rent, and even disruptive start-ups like Uber or
+            Cabify, which are causing a stir with previously used models. However, such new models are putting public
+            administrations in a challenging situation. The EU-funded URBANITE project aims to develop a solution that
+            collects and analyses data, that combined with AI, can assist public administrations in policy-related
+            decisions concerning urban transformation caused by these new transportation and business models. URBANITE
+            focuses also on social aspects, by analyzing stakeholders’ trust in technologies aiding decision-making.
+        </p>
+
+    </mat-card-content>
+</mat-card>
+<mat-card class="mt-1">
+    <mat-card-header>
+        <mat-card-title>Objects</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <p>
+            Cities are facing a revolution in urban mobility. Emerging start-ups are offering innovative mobility
+            solutions to satisfy the demand of the growing population, both living or moving into the cities every day.
+            We are moving from the concept of owning to sharing a vehicle; from using public transport services to
+            moving around with a hop on/off bike or electric scooter; disruptive start-ups (Uber, Cabify) are shaking up
+            traditionally established business models... But this innovation is also bringing up unforeseen consequences
+            that public administrations need to manage. Electric scooters driven in pedestrian areas are posing safety
+            risks and even pedestrian kills; piles of broken bikes are laying around in streets; protests and strikes by
+            taxi drivers; electric charge points need to coexist with the growing demand for public parking spaces. It
+            is in this new context that public administrations need means to help them understand this new scenario,
+            supporting them in making policy–related decisions and predicting eventualities. There is a need of a
+            platform that can harvest, fuse and curate data from heterogeneous sources, that can extract knowledge to
+            help in the decision-making processes and simulation of solutions to anticipate behaviours and delimit
+            unforeseen consequences. Besides, such intelligent platform can foster cross-departmental collaboration by
+            eradicating internal silos. URBANITE will analyse the impact, trust and attitudes of civil servants,
+            citizens and other stakeholders with respect to the integration of disruptive technologies such as AI, DSS,
+            big data analytics and predictive algorithms in a data–driven decision-making process. To this end, URBANITE
+            will provide recommendations, pathways and toolkits (both ICT-based such as data management platform and
+            DSS, and non-ICT such as co-creation activities and a repository of social-related assets) for city
+            managers. Results will be validated in 4 real use cases: Amsterdam, Bilbao, Helsinki and Messina.
+        </p>
+
+    </mat-card-content>
+</mat-card>
\ No newline at end of file

src/app/pages/about/info/info.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoComponent } from './info.component';
+
+describe('InfoComponent', () => {
+  let component: InfoComponent;
+  let fixture: ComponentFixture<InfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/about/info/info.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-info',
+  templateUrl: './info.component.html',
+  styleUrls: ['./info.component.scss']
+})
+export class InfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/about/site/site.component.html

+<iframe src="https://urbanite-project.eu/" width="100%" height="680" frameborder="0"></iframe>
\ No newline at end of file

src/app/pages/about/site/site.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiteComponent } from './site.component';
+
+describe('SiteComponent', () => {
+  let component: SiteComponent;
+  let fixture: ComponentFixture<SiteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SiteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SiteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/about/site/site.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-site',
+  templateUrl: './site.component.html',
+  styleUrls: ['./site.component.scss']
+})
+export class SiteComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/charts/chartjs/chartjs.component.html

 <div class="row">
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Pie</nb-card-header>
+      <nb-card-header>
+        Pie
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-chartjs-pie></ngx-chartjs-pie>
       </nb-card-body>
@@ -9,7 +13,11 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Bar</nb-card-header>
+      <nb-card-header>Bar
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
+      
       <nb-card-body>
         <ngx-chartjs-bar></ngx-chartjs-bar>
       </nb-card-body>
@@ -17,7 +25,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Line</nb-card-header>
+      <nb-card-header>Line
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-chartjs-line></ngx-chartjs-line>
       </nb-card-body>
@@ -25,7 +36,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Multiple x-axis</nb-card-header>
+      <nb-card-header>Multiple x-axis 
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
       </nb-card-body>
@@ -33,7 +47,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Bar Horizontal</nb-card-header>
+      <nb-card-header>Bar Horizontal
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
       </nb-card-body>
@@ -41,7 +58,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Radar</nb-card-header>
+      <nb-card-header>Radar
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-chartjs-radar></ngx-chartjs-radar>
       </nb-card-body>

src/app/pages/charts/d3/d3.component.html

 <div class="row">
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Pie</nb-card-header>
+      <nb-card-header>Pie
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-d3-pie></ngx-d3-pie>
       </nb-card-body>
@@ -9,7 +12,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Bar</nb-card-header>
+      <nb-card-header>Bar
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-d3-bar></ngx-d3-bar>
       </nb-card-body>
@@ -17,7 +23,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Line</nb-card-header>
+      <nb-card-header>Line
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-d3-line></ngx-d3-line>
       </nb-card-body>
@@ -25,7 +34,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Advanced Pie</nb-card-header>
+      <nb-card-header>Advanced Pie
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
       </nb-card-body>
@@ -33,7 +45,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Area Chart</nb-card-header>
+      <nb-card-header>Area Chart
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-d3-area-stack></ngx-d3-area-stack>
       </nb-card-body>

src/app/pages/charts/echarts/echarts.component.html

 <div class="row">
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Pie</nb-card-header>
+      <nb-card-header>Pie
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-echarts-pie></ngx-echarts-pie>
       </nb-card-body>
@@ -9,7 +12,10 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Bar</nb-card-header>
+      <nb-card-header>Bar
+        <br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+      </nb-card-header>
       <nb-card-body>
         <ngx-echarts-bar></ngx-echarts-bar>
       </nb-card-body>
@@ -17,7 +23,8 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Line</nb-card-header>
+      <nb-card-header>Line<br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></nb-card-header>
       <nb-card-body>
         <ngx-echarts-line></ngx-echarts-line>
       </nb-card-body>
@@ -25,7 +32,8 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Multiple x-axis</nb-card-header>
+      <nb-card-header>Multiple x-axis<br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></nb-card-header>
       <nb-card-body>
         <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
       </nb-card-body>
@@ -33,7 +41,8 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Area Stack</nb-card-header>
+      <nb-card-header>Area Stack<br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></nb-card-header>
       <nb-card-body>
         <ngx-echarts-area-stack></ngx-echarts-area-stack>
       </nb-card-body>
@@ -41,7 +50,8 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Bar Animation</nb-card-header>
+      <nb-card-header>Bar Animation<br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></nb-card-header>
       <nb-card-body>
         <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
       </nb-card-body>
@@ -49,7 +59,8 @@
   </div>
   <div class="col-lg-6">
     <nb-card>
-      <nb-card-header>Radar</nb-card-header>
+      <nb-card-header>Radar<br/>
+        <span class="subtitle-2 text-hint">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></nb-card-header>
       <nb-card-body>
         <ngx-echarts-radar></ngx-echarts-radar>
       </nb-card-body>

src/app/pages/external-app/card-links/card-links.component.html

-<div class="d-flex justify-content-center align-items-center h-100">
-<mat-card class="col-6" *ngFor="let c of cards">
+<div class="d-flex flex-row justify-content-between align-items-center h-50">
+  <mat-card class="col-6 mr-2" *ngFor="let c of cards">
     <mat-card-header>
-      <div mat-card-avatar> <img mat-card-image src="/assets/images/oia.png" > </div>
+      <img mat-card-avatar [src]="c.avatar"> 
       <mat-card-title>{{c.title}}</mat-card-title>
       <mat-card-subtitle>{{c.subtitle}}</mat-card-subtitle>
     </mat-card-header>
-    <img mat-card-image src="/assets/images/oia-page.png" alt="Photo of a Shiba Inu">
     <mat-card-content>
+      <img mat-card-image class="img-responsive" [src]="c.image">
       <p>
         {{c.description}}
       </p>
     </mat-card-content>
     <mat-card-actions class="d-flex justify-content-center">
-      <a href="{{c.url}}" mat-button>OPEN</a>
+      <a href="{{c.url}}" mat-button target="_blank">OPEN</a>
     </mat-card-actions>
   </mat-card>
 </div>
\ No newline at end of file

src/app/pages/external-app/iframes/iframes.component.html

-<iframe src="https://idra.eng.it" width="100%" height="680" frameborder="0"></iframe>
\ No newline at end of file
+<iframe src="https://urbanite-project.eu/" width="100%" height="680" frameborder="0"></iframe>
\ No newline at end of file

src/app/pages/pages-menu.ts

@@ -5,6 +5,11 @@ export const MENU_ITEMS: NbMenuItem[] = [
     title: 'SERVICES',
     group: true,
   },
+  {
+    title: 'Home',
+    icon: 'home-outline',
+    link: "/pages/home"
+  },
   {
     title: 'Maps',
     icon: 'map-outline',
@@ -41,11 +46,25 @@ export const MENU_ITEMS: NbMenuItem[] = [
       {
         title: 'Card Links',
         link: '/pages/external-app/card-links',
+      }
+      // {
+      //   title: 'Iframes',
+      //   link: '/pages/external-app/iframes',
+      // }
+    ],
   },
   {
-        title: 'Iframes',
-        link: '/pages/external-app/iframes',
+    title: 'Urbanite Project',
+    icon: 'info-outline',
+    link: '/pages/about',
+    children: [{
+      title:"About Urbanite",
+      link:"/pages/about/info"
     }
+    // ,{
+    //   title:"Site Project",
+    //   link:"/pages/about/project"
+    // }
   ],
   },
   {

src/app/pages/pages-routing.module.ts

@@ -14,6 +14,11 @@ const routes: Routes = [{
       loadChildren: () => import('./external-app/external-app.module')
         .then(m => m.ExternalAppModule),
     },
+    {
+      path: 'about',
+      loadChildren: () => import('./about/about.module')
+        .then(m => m.AboutModule),
+    },
     {
       path: 'ui-features',
       loadChildren: () => import('./ui-features/ui-features.module')

src/assets/config.json

@@ -8,6 +8,15 @@
             "image": "/assets/images/oia-page.png",
             "description": "The Open Innovation Area (OIA) is an evolved Idea Management System that allows the stakeholders to track real needs and to address them by adopting a co-creation and innovation approach.",
             "responsible_partner":"ENG"
+        },
+        {
+            "url": "https://idra.eng.it",
+            "title": "Idra",
+            "subtitle":"Open Data Federation Platform",
+            "avatar": "https://idra.eng.it/images/idra_D_v6_black.svg", 
+            "image": "https://idra.readthedocs.io/en/latest/user/userhomepage.png",
+            "description": "Idra is a web application able to federate existing Open Data Management Systems (ODMS) based on different technologies providing a unique access point to search and discover open datasets coming from heterogeneous sources. Idra uniforms representation of collected open datasets, thanks to the adoption of international standards (DCAT-AP) and provides a set of RESTful APIs to be used by third party applications.",
+            "responsible_partner":"ENG"
         }
     ]
 }
\ No newline at end of file