Aggiunta funzionalità di prenotazione visita

ShyVortex · Apr 26, 2024 · 9030acf · 9030acf
1 parent f10c311
commit 9030acf
Show file tree

Hide file tree

Showing 16 changed files with 482 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,8 @@
     "capacitor": "^0.5.6",
     "crypto-browserify": "^3.12.0",
     "ionicons": "^7.2.1",
+    "lottie-web": "^5.12.2",
+    "ngx-lottie": "^11.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -92,4 +92,12 @@ export const routes: Routes = [
     loadComponent: () => import('./pages/medic/prescriptions/prescriptions.page')
       .then(m => m.PrescriptionsPage)
   },
+  {
+    path: 'patient-reservation-continue',
+    loadComponent: () => import('./pages/patient/reservation/reservation-continue/reservation-continue.page').then( m => m.ReservationContinuePage)
+  },
+  {
+    path: 'reservation-confirmed',
+    loadComponent: () => import('./pages/patient/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page').then( m => m.ReservationConfirmedPage)
+  },
 ];
diff --git a/...nt/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.html b/...nt/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.html
@@ -0,0 +1,42 @@
+<ion-header class="ion-no-border" [translucent]="true">
+  <ion-toolbar class="top-toolbar">
+    <div class="container">
+      <ion-label class="tab-name">Prenotazione confermata</ion-label>
+    </div>
+    <!-- <ion-icon id="settings-icon"
+              src="../../../assets/icon/settings/settings.svg"
+              slot="end"></ion-icon> -->
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ng-lottie height="25em" [options]="options" (animationCreated)="animationCreated($event)" class="animation"></ng-lottie>
+  <h2 class="info-h2">PRENOTAZIONE EFFETTUATA</h2>
+  <h6 class="info-h6">La prenotazione è stata effettuata ed è ora in attesa di conferma.</h6>
+  <ion-button class="confirm-button" expand="block" fill="solid" routerLink="/home">Torna alla home</ion-button>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-tabs class="bottom-bar">
+      <ion-tab-bar class="bottom-tab-bar" slot="bottom">
+        <ion-tab-button class="bottom-bar-buttons" tab="home">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/home.png"></ion-img>
+          Home
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" tab="notifications">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/notifications.png"></ion-img>
+          Notifiche
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" tab="reservations">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/booking.png"></ion-img>
+          Prenota
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" tab="sos">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/sos.png"></ion-img>
+          SOS
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-toolbar>
+</ion-footer>
diff --git a/...nt/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.scss b/...nt/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.scss
@@ -0,0 +1,46 @@
+.reservation-confirmed-content-one {
+  padding: 3em;
+}
+
+.info-h6 {
+  color: var(--Black, #000);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 50;
+  line-height: normal;
+  margin-bottom: 2em;
+  text-align: center;
+}
+
+.info-h2 {
+  color: var(--Black, #000);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+.confirm-button {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  //margin-top: 22em;
+  width: 85%;
+}
+
+.top-toolbar {
+  height: 6.5em;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  .container {
+    display: flex;
+    align-items: center;
+  }
+
+  .tab-name {
+    margin-left: 1em;
+    margin-top: 2.3em;
+  }
+}
diff --git a/...reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.spec.ts b/...reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReservationConfirmedPage } from './reservation-confirmed.page';
+
+describe('ReservationConfirmedPage', () => {
+  let component: ReservationConfirmedPage;
+  let fixture: ComponentFixture<ReservationConfirmedPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReservationConfirmedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...ient/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.ts b/...ient/reservation/reservation-continue/reservation-confirmed/reservation-confirmed.page.ts
@@ -0,0 +1,39 @@
+/* eslint-disable @angular-eslint/no-empty-lifecycle-method */
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons, IonBackButton, IonIcon, IonImg, IonButton, IonTabBar, IonTabs, IonTabButton, IonFooter, IonLabel } from '@ionic/angular/standalone';
+
+import { AnimationItem } from 'lottie-web';
+import { LottieComponent, AnimationOptions } from 'ngx-lottie';
+
+@Component({
+  selector: 'app-reservation-confirmed',
+  templateUrl: './reservation-confirmed.page.html',
+  styleUrls: ['./reservation-confirmed.page.scss'],
+  standalone: true,
+  imports: [LottieComponent, IonLabel, IonFooter, IonTabButton, IonTabs, IonTabBar, IonButton, IonImg, IonIcon, IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+})
+export class ReservationConfirmedPage implements OnInit {
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  options: AnimationOptions = {
+    path: '../../../assets/animations/green-check.json',
+    loop: false,
+  };
+
+  /* styles: Partial<CSSStyleDeclaration> = {
+    width: '200em',
+    height: '200em',
+    // margin: 'auto auto',
+  }; */
+
+  animationCreated(animationItem: AnimationItem): void {
+
+    console.log("Animazione renderizzata. \n\n", animationItem);
+  }
+
+}
diff --git a/src/app/pages/patient/reservation/reservation-continue/reservation-continue.page.html b/src/app/pages/patient/reservation/reservation-continue/reservation-continue.page.html
@@ -0,0 +1,69 @@
+<ion-header class="ion-no-border" [translucent]="true">
+  <ion-toolbar class="top-toolbar">
+    <div class="container">
+      <ion-button class="back-button" fill="transparent" (click)="navigateBack()">
+        &larr;
+      </ion-button>
+      <ion-label class="tab-name">Prenotazione</ion-label>
+    </div>
+    <!-- <ion-icon id="settings-icon"
+              src="../../../assets/icon/settings/settings.svg"
+              slot="end"></ion-icon> -->
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding">
+  <h5 class="available-appointments"><b>Orari disponibili</b></h5>
+
+  <ion-grid>
+    <ion-row class="available-appointments">
+      <ion-button (click)="toggleClickedItem()" [ngClass]="{'button-clicked': this.itemClicked}" fill="outline" size="default" class="appointment-button">7:00</ion-button>
+      <ion-button fill="outline" size="default" class="appointment-button">11:00</ion-button>
+      <ion-button fill="outline" size="default" class="appointment-button">15:30</ion-button>
+    </ion-row>
+    <ion-row class="available-appointments">
+      <ion-button fill="outline" size="default" class="appointment-button">16:15</ion-button>
+      <ion-button fill="outline" size="default" class="appointment-button">18:00</ion-button>
+      <ion-button fill="outline" size="default" class="appointment-button">18:30</ion-button>
+    </ion-row>
+  </ion-grid>
+
+  <ion-item-divider></ion-item-divider>
+
+  <h6 class="policy">Eventuali modifiche o annullamenti dovranno essere effettuati attraverso l'applicazione con almeno 24 ore di anticipo rispetto all'orario programmato.</h6>
+
+  <ion-button class="confirm-button" expand="block" fill="solid" id="present-alert">Prenota</ion-button>
+
+  <ion-alert
+  trigger="present-alert"
+  header="Conferma prenotazione"
+  subHeader="Visita generale"
+  message="13/04/2024, alle ore 07:00"
+  [buttons]="alertButtons"
+  ></ion-alert>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-tabs class="bottom-bar">
+      <ion-tab-bar class="bottom-tab-bar" slot="bottom">
+        <ion-tab-button class="bottom-bar-buttons" tab="home">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/home.png"></ion-img>
+          Home
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" tab="notifications">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/notifications.png"></ion-img>
+          Notifiche
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" tab="reservations">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/booking.png"></ion-img>
+          Prenota
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" tab="sos">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/sos.png"></ion-img>
+          SOS
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/pages/patient/reservation/reservation-continue/reservation-continue.page.scss b/src/app/pages/patient/reservation/reservation-continue/reservation-continue.page.scss
@@ -0,0 +1,39 @@
+.available-appointments {
+  justify-content: center;
+}
+
+.appointment {
+  width: 8em;
+}
+
+.appointment-button {
+  width: 6em;
+}
+
+.confirm-button {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30em;
+  width: 85%;
+}
+
+.policy {
+  color: gray;
+  font-size: 1em;
+}
+
+.top-toolbar {
+  height: 6.5em;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  .container {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.button-clicked {
+  background-color: rgba(78, 182, 140, 0.205);
+}
diff --git a/src/app/pages/patient/reservation/reservation-continue/reservation-continue.page.spec.ts b/src/app/pages/patient/reservation/reservation-continue/reservation-continue.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReservationContinuePage } from './reservation-continue.page';
+
+describe('ReservationContinuePage', () => {
+  let component: ReservationContinuePage;
+  let fixture: ComponentFixture<ReservationContinuePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReservationContinuePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});