feat: added style of flight-config manager

src/app/agent/pages/home-page/home-page.component.html

@@ -5,5 +5,6 @@
     <div class="w-100">
         <shared-navigation-user (toggleSidebarEvent)="toggleSidebarEvent()"></shared-navigation-user>
         <router-outlet></router-outlet>
+        <shared-footer></shared-footer>
     </div>
 </div>

src/app/passenger/pages/home-page/home-page.component.html

@@ -5,5 +5,6 @@
     <div class="w-100">
         <shared-navigation (toggleSidebarEvent)="toggleSidebarEvent()"></shared-navigation>
         <router-outlet></router-outlet>
+        <shared-footer></shared-footer>
     </div>
-</div>
\ No newline at end of file
+</div>

src/app/shared/components/input-calendar/input-calendar.component.css

+/* Input */
+
+.field {
+  position: relative;
+  padding-top: 12px;
+}
+
+.field input {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+  font-size: 12px;
+  outline: none;
+  color: #8f8e8e;
+}
+
+.field input:focus {
+  border-bottom: 1px solid #3f51b5;
+}
+
+.field label {
+  position: absolute;
+  top: 0px;
+  left: 2px;
+  pointer-events: none;
+  transition: 0.2s;
+  font-size: 12px;
+}
+
+.field input:focus + label {
+  top: 0;
+  left: 2px;
+  font-size: 12px;
+  color: #3f51b5;
+}
+
+.field input + label {
+  top: 0;
+  left: 2px;
+  font-size: 12px;
+  color: #ccc;
+}

src/app/shared/components/input-calendar/input-calendar.component.html

+<div class="field field-date-start">
+  <input [value]="value" type="date" name="name" id="field-date-start">
+  <label for="field-name">{{ name }} *</label>
+</div>

src/app/shared/components/input-calendar/input-calendar.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'shared-input-calendar',
+  templateUrl: './input-calendar.component.html',
+  styleUrls: ['./input-calendar.component.css']
+})
+export class InputCalendarComponent {
+
+  @Input()
+  public name: string = '';
+
+  @Input()
+  public value: string = '';
+}

src/app/shared/components/input-dropdown/input-dropdown.component.css

+.field {
+  position: relative;
+  padding-top: 12px;
+}
+
+.field input {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+  font-size: 12px;
+  outline: none;
+  color: #8f8e8e;
+}
+
+.field input:focus {
+  border-bottom: 1px solid #3f51b5;
+}
+
+.field label {
+  position: absolute;
+  top: 0px;
+  left: 2px;
+  pointer-events: none;
+  transition: 0.2s;
+  font-size: 12px;
+  color: #ccc;
+}
+
+.field input:focus + label {
+  top: 0;
+  left: 2px;
+  font-size: 12px;
+  color: #3f51b5;
+}
+
+.field input + label {
+  top: 0;
+  left: 2px;
+  font-size: 12px;
+  color: #ccc;
+}
+
+.field-select {
+  width: 100%;
+  outline: none;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+  font-size: 12px;
+  color: #8f8e8e;
+}

src/app/shared/components/input-dropdown/input-dropdown.component.html

+<div class="field field-date-start">
+  <select class="field-select" type="date" name="name" id="field-date-start">
+    <option value="1"></option>
+  </select>
+  <label for="field-name">{{ name }} *</label>
+</div>

src/app/shared/components/input-dropdown/input-dropdown.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'shared-input-dropdown',
+  templateUrl: './input-dropdown.component.html',
+  styleUrls: ['./input-dropdown.component.css']
+})
+export class InputDropdownComponent {
+
+  @Input()
+  public name: string = '';
+}

src/app/shared/components/panel-menu/panel-menu.component.css

+/* Panel Navigation */
+
+.panel__navigation-headers {
+  display: flex;
+}
+
+.panel__navigation-header {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.panel__navigation-header.active {
+  position: relative;
+  border: 1px solid #e0e0e0;
+  border-bottom: none;
+}
+
+.panel__navigation-header.active::before {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 1px;
+  left: 0;
+  bottom: -1px;
+  background-color: white;
+}
+
+.panel__content {
+  border: 1px solid #e0e0e0;
+  padding: 8px 16px;
+}

src/app/shared/components/panel-menu/panel-menu.component.html

+<div class="panel__navigation">
+  <div class="panel__navigation-headers">
+    <div *ngFor="let item of panelItems">
+      <div class="panel__navigation-header" (click)="onChangePanelItem(item)" [ngClass]="[item.id === panelItemActive?.id ? 'active' : '']">
+        <span class="panel__navigation-header-title">{{ item.title }}</span>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="panel__content">
+  <ng-content></ng-content>
+</div>

src/app/shared/components/panel-menu/panel-menu.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PanelItem } from 'src/app/supervisor/interfaces/panel-item.interface';
+
+@Component({
+  selector: 'shared-panel-menu',
+  templateUrl: './panel-menu.component.html',
+  styleUrls: ['./panel-menu.component.css']
+})
+export class PanelMenuComponent implements OnInit {
+
+  ngOnInit(): void {
+    this.panelItems.length > 0 ? this.panelItemActive = this.panelItems[0] : null;
+  }
+
+  @Input()
+  public panelItems: PanelItem[] = [];
+
+  @Input()
+  public panelItemActive?: PanelItem;
+
+  @Output()
+  public onChangeItemActive: EventEmitter<PanelItem> = new EventEmitter();
+
+  onChangePanelItem(item: PanelItem) {
+    this.onChangeItemActive.emit(item);
+  }
+}

src/app/shared/shared.module.ts

@@ -15,6 +15,9 @@ import { StepperComponent } from './components/stepper/stepper.component';
 import { InputSelectorComponent } from './components/input-selector/input-selector.component';
 import { TableSearchComponent } from './components/table-search/table-search.component';
 import { TablePaginatorComponent } from './components/table-paginator/table-paginator.component';
+import { InputCalendarComponent } from './components/input-calendar/input-calendar.component';
+import { InputDropdownComponent } from './components/input-dropdown/input-dropdown.component';
+import { PanelMenuComponent } from './components/panel-menu/panel-menu.component';
 
 
 
@@ -33,7 +36,10 @@ import { TablePaginatorComponent } from './components/table-paginator/table-pagi
     StepperComponent,
     InputSelectorComponent,
     TableSearchComponent,
-    TablePaginatorComponent
+    TablePaginatorComponent,
+    InputCalendarComponent,
+    InputDropdownComponent,
+    PanelMenuComponent
   ],
   imports: [
     CommonModule,
@@ -52,7 +58,10 @@ import { TablePaginatorComponent } from './components/table-paginator/table-pagi
     StepperComponent,
     InputSelectorComponent,
     TablePaginatorComponent,
-    TableSearchComponent
+    TableSearchComponent,
+    InputCalendarComponent,
+    InputDropdownComponent,
+    PanelMenuComponent
   ]
 })
 export class SharedModule { }

src/app/supervisor/interfaces/airline.interface.ts

+export interface Airline {
+  id: number;
+  name: string;
+  code: string;
+}

src/app/supervisor/interfaces/panel-item.interface.ts

+export interface PanelItem {
+  id: number;
+  title: string;
+}

src/app/supervisor/pages/flight-add/flight-add.component.css

+.section {
+  margin-top: 20px;
+  margin-bottom: 15px;
+}
+
+.section__title {
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.section__fields {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}

src/app/supervisor/pages/flight-add/flight-add.component.html

+<shared-navigation></shared-navigation>
+<shared-mail-box
+  title="Configuración de vuelos"
+  message="Este gestor permite realizar la configuración de vuelos"
+  icon="bi-airplane"
+  [btnBack]="true">
+
+  <section class="section">
+    <h4 class="section__title">Información general</h4>
+    <div class="section__fields">
+      <shared-input-selector
+        name="Aeropuerto origen"
+        [tableModel]="flightModel"
+        [tableData]="airports">
+      </shared-input-selector>
+      <shared-input-selector
+        name="Aeropuerto destino"
+        [tableModel]="flightModel"
+        [tableData]="airports">
+      </shared-input-selector>
+      <shared-input-calendar name="Fecha de partida"></shared-input-calendar>
+      <shared-input-calendar name="Fecha de llegada"></shared-input-calendar>
+      <shared-input-selector
+        name="Aerolinea"
+        [tableModel]="airlineModel"
+        [tableData]="airlines">
+      </shared-input-selector>
+      <shared-input-dropdown name="Tipo de aeronave"></shared-input-dropdown>
+    </div>
+  </section>
+  <section class="section">
+    <h4 class="section__title">Configuración de vuelo</h4>
+    <shared-panel-menu [panelItems]="panelItems" [panelItemActive]="panelItemActive" (onChangeItemActive)="onChangeItemActive($event)">
+      <div [ngSwitch]="panelItemActive.id">
+        <div *ngSwitchCase="1">Escalas</div>
+        <div *ngSwitchCase="2">Costos</div>
+      </div>
+    </shared-panel-menu>
+  </section>
+
+</shared-mail-box>

src/app/supervisor/pages/flight-add/flight-add.component.ts

+import { Component, OnInit } from '@angular/core';
+import { PanelItem } from '../../interfaces/panel-item.interface';
+import { TableModel } from 'src/app/shared/interfaces/table-model.interface';
+import { Airport } from 'src/app/agent/interfaces/airport.interface';
+import { AirportsService } from 'src/app/agent/services/airports.service';
+import { Airline } from '../../interfaces/airline.interface';
+import { AirlineService } from '../../services/airline.service';
+
+@Component({
+  selector: 'app-flight-add',
+  templateUrl: './flight-add.component.html',
+  styleUrls: ['./flight-add.component.css']
+})
+export class FlightAddComponent implements OnInit {
+
+  public panelItems: PanelItem[] = [
+    {
+      id: 1,
+      title: 'Escalas',
+    },
+    {
+      id: 2,
+      title: 'Costos',
+    }
+  ];
+
+  public flightModel: TableModel[] = [
+    {
+      name: 'id',
+      title: '#'
+    },
+    {
+      name: 'name',
+      title: 'Nombre'
+    },
+    {
+      name: 'location',
+      title: 'Ubicación'
+    },
+    {
+      name: 'code',
+      title: 'Código'
+    }
+  ];
+
+  public airlineModel: TableModel[] = [
+    {
+      name: 'id',
+      title: '#'
+    },
+    {
+      name: 'name',
+      title: 'Nombre'
+    },
+    {
+      name: 'code',
+      title: 'Código'
+    }
+  ]
+
+  public airports: Airport[] = [];
+
+  public airlines: Airline[] = [];
+
+  public panelItemActive: PanelItem = this.panelItems[0];
+
+  onChangeItemActive(item: PanelItem) {
+    this.panelItemActive = item;
+  }
+
+  constructor(private airportsService: AirportsService,
+    private airlinesService: AirlineService) { }
+
+  ngOnInit(): void {
+    this.airportsService.getAll()
+      .subscribe(airports => this.airports = airports);
+
+    this.airlinesService.getAll()
+      .subscribe(airlines => this.airlines = airlines);
+  }
+}

src/app/supervisor/services/airline.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Airline } from '../interfaces/airline.interface';
+
+@Injectable({providedIn: 'root'})
+export class AirlineService {
+  constructor(private http: HttpClient) { }
+
+  BASE_URL = 'http://localhost:3000';
+
+  getAll(): Observable<Airline[]> {
+    return this.http.get<Airline[]>(`${this.BASE_URL}/airlines`);
+  }
+}

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

@@ -4,6 +4,7 @@ import { HomePageComponent } from './pages/home-page/home-page.component';
 import { FlightConfigComponent } from './pages/flight-config/flight-config.component';
 import { AgentsComponent } from './pages/agents/agents.component';
 import { AgentAddComponent } from './pages/agent-add/agent-add.component';
+import { FlightAddComponent } from './pages/flight-add/flight-add.component';
 
 const routes: Routes = [
     {
@@ -16,6 +17,11 @@ const routes: Routes = [
                 title: 'Configuración de vuelos',
                 component: FlightConfigComponent
             },
+            {
+              path: 'flight-config/new',
+              title: 'Configuración de vuelos',
+              component: FlightAddComponent
+            },
             {
                 path: 'agents',
                 title: 'Agentes',

src/app/supervisor/supervisor.module.ts

@@ -8,6 +8,7 @@ import { HomePageComponent } from './pages/home-page/home-page.component';
 import { AgentAddComponent } from './pages/agent-add/agent-add.component';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FlightAddComponent } from './pages/flight-add/flight-add.component';
 
 
 
@@ -16,7 +17,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     FlightConfigComponent,
     AgentsComponent,
     HomePageComponent,
-    AgentAddComponent
+    AgentAddComponent,
+    FlightAddComponent
   ],
   imports: [
     CommonModule,