Aggiunta footer routing

- Cliccando sui pulsanti della bottom bar ora si verrà reindirizzati alla corrispondente pagina. - Aggiunti i nuovi stili per la home univoca nel tema globale - Spostato il tema globale da variables.scss a global.scss per maggiore chiarezza ed efficienza
ShyVortex · Apr 25, 2024 · a0bfd1d · a0bfd1d
1 parent 4680516
commit a0bfd1d
Show file tree

Hide file tree

Showing 28 changed files with 656 additions and 531 deletions.
diff --git a/src/app/pages/medic/home/home.page.html b/src/app/pages/medic/home/home.page.html
@@ -96,15 +96,15 @@ <h3>CIAO MARIO</h3>
   <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-tab-button class="bottom-bar-buttons" (click)="goToHome()">
           <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-tab-button class="bottom-bar-buttons" (click)="goToNotifs()">
           <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="prescriptions">
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToPrescriptions()">
           <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/prescriptions.png"></ion-img>
           Prescrizioni
         </ion-tab-button>

diff --git a/src/app/pages/medic/home/home.page.scss b/src/app/pages/medic/home/home.page.scss
@@ -1,46 +0,0 @@
-.user-details-title {
-  font-size: x-large;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-
-  .item-title-icon {
-    width: 1.5em;
-    height: auto;
-    margin-right: 0.5em;
-  }
-}
-
-.list-key {
-  font-size: large;
-  font-weight: bold;
-}
-
-.list-value {
-  font-weight: normal;
-}
-
-#security-card {
-  background-color: #845EC2;
-}
-
-.access-card {
-  margin-top: -0.5em;
-  width: 10em;
-  height: auto;
-  display: inline-block;
-
-  .card-icon {
-    width: 2em;
-    height: auto;
-    margin: auto;
-    display: block;
-  }
-
-  .card-title {
-    color: #000;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-  }
-}

diff --git a/src/app/pages/medic/home/home.page.ts b/src/app/pages/medic/home/home.page.ts
@@ -52,4 +52,16 @@ export class HomePage implements OnInit {
   logout() {
     this.navCtrl.navigateRoot("login");
   }
+
+  goToHome() {
+    this.navCtrl.navigateBack("medic-home");
+  }
+
+  goToNotifs() {
+    this.navCtrl.navigateForward("medic-notifs");
+  }
+
+  goToPrescriptions() {
+    this.navCtrl.navigateForward("medic-prescriptions");
+  }
 }
diff --git a/src/app/pages/medic/notifications/notifications.page.html b/src/app/pages/medic/notifications/notifications.page.html
@@ -10,19 +10,23 @@
   </ion-toolbar>
 </ion-header>
 
-<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="prescriptions">
-      <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/prescriptions.png"></ion-img>
-      Prescrizioni
-    </ion-tab-button>
-  </ion-tab-bar>
-</ion-tabs>
+<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" (click)="goToHome()">
+          <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" (click)="goToNotifs()">
+          <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" (click)="goToPrescriptions()">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/prescriptions.png"></ion-img>
+          Prescrizioni
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/pages/medic/notifications/notifications.page.ts b/src/app/pages/medic/notifications/notifications.page.ts
@@ -2,28 +2,42 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
-    IonContent,
-    IonHeader, IonIcon,
-    IonImg, IonLabel,
-    IonTabBar,
-    IonTabButton,
-    IonTabs,
-    IonTitle,
-    IonToolbar
+  IonContent, IonFooter,
+  IonHeader, IonIcon,
+  IonImg, IonLabel,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+  IonTitle,
+  IonToolbar
 } from '@ionic/angular/standalone';
+import {NavController} from "@ionic/angular";
 
 @Component({
   selector: 'app-logbook',
   templateUrl: './notifications.page.html',
   styleUrls: ['./notifications.page.scss'],
   standalone: true,
-    imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonImg, IonTabBar, IonTabButton, IonTabs, IonIcon, IonLabel]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonImg, IonTabBar, IonTabButton, IonTabs, IonIcon, IonLabel, IonFooter]
 })
 export class NotificationsPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    private navCtrl: NavController,
+  ) { }
 
   ngOnInit() {
   }
 
+  goToHome() {
+    this.navCtrl.navigateBack("medic-home");
+  }
+
+  goToNotifs() {
+    this.navCtrl.navigateForward("medic-notifs");
+  }
+
+  goToPrescriptions() {
+    this.navCtrl.navigateForward("medic-prescriptions");
+  }
 }
diff --git a/src/app/pages/medic/prescriptions/prescriptions.page.html b/src/app/pages/medic/prescriptions/prescriptions.page.html
@@ -10,19 +10,23 @@
   </ion-toolbar>
 </ion-header>
 
-<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="prescriptions">
-      <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/prescriptions.png"></ion-img>
-      Prescrizioni
-    </ion-tab-button>
-  </ion-tab-bar>
-</ion-tabs>
+<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" (click)="goToHome()">
+          <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" (click)="goToNotifs()">
+          <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" (click)="goToPrescriptions()">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/prescriptions.png"></ion-img>
+          Prescrizioni
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/pages/medic/prescriptions/prescriptions.page.ts b/src/app/pages/medic/prescriptions/prescriptions.page.ts
@@ -2,28 +2,42 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonImg, IonLabel,
-    IonTabBar,
-    IonTabButton, IonTabs,
-    IonTitle,
-    IonToolbar
+  IonContent, IonFooter,
+  IonHeader,
+  IonIcon,
+  IonImg, IonLabel,
+  IonTabBar,
+  IonTabButton, IonTabs,
+  IonTitle,
+  IonToolbar
 } from '@ionic/angular/standalone';
+import {NavController} from "@ionic/angular";
 
 @Component({
   selector: 'app-prescriptions',
   templateUrl: './prescriptions.page.html',
   styleUrls: ['./prescriptions.page.scss'],
   standalone: true,
-    imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonIcon, IonImg, IonTabBar, IonTabButton, IonTabs, IonLabel]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonIcon, IonImg, IonTabBar, IonTabButton, IonTabs, IonLabel, IonFooter]
 })
 export class PrescriptionsPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    private navCtrl: NavController,
+  ) { }
 
   ngOnInit() {
   }
 
+  goToHome() {
+    this.navCtrl.navigateBack("medic-home");
+  }
+
+  goToNotifs() {
+    this.navCtrl.navigateForward("medic-notifs");
+  }
+
+  goToPrescriptions() {
+    this.navCtrl.navigateForward("medic-prescriptions");
+  }
 }
diff --git a/src/app/pages/nurse/drugs/drugs.page.html b/src/app/pages/nurse/drugs/drugs.page.html
@@ -10,23 +10,27 @@
   </ion-toolbar>
 </ion-header>
 
-<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="drugs">
-      <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/drugs.png"></ion-img>
-      Farmaci
-    </ion-tab-button>
-    <ion-tab-button class="bottom-bar-buttons" tab="shifts">
-      <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/booking.png"></ion-img>
-      Turni
-    </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-footer>
+  <ion-toolbar>
+    <ion-tabs class="bottom-bar">
+      <ion-tab-bar class="bottom-tab-bar" slot="bottom">
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToHome()">
+          <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" (click)="goToDrugs()">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/drugs.png"></ion-img>
+          Farmaci
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToShifts()">
+          <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/booking.png"></ion-img>
+          Turni
+        </ion-tab-button>
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToSOS()">
+          <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/nurse/drugs/drugs.page.ts b/src/app/pages/nurse/drugs/drugs.page.ts
@@ -2,28 +2,46 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonImg, IonLabel,
-    IonTabBar,
-    IonTabButton, IonTabs,
-    IonTitle,
-    IonToolbar
+  IonContent, IonFooter,
+  IonHeader,
+  IonIcon,
+  IonImg, IonLabel,
+  IonTabBar,
+  IonTabButton, IonTabs,
+  IonTitle,
+  IonToolbar
 } from '@ionic/angular/standalone';
+import {NavController} from "@ionic/angular";
 
 @Component({
   selector: 'app-drugs',
   templateUrl: './drugs.page.html',
   styleUrls: ['./drugs.page.scss'],
   standalone: true,
-    imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonIcon, IonImg, IonTabBar, IonTabButton, IonTabs, IonLabel]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonIcon, IonImg, IonTabBar, IonTabButton, IonTabs, IonLabel, IonFooter]
 })
 export class DrugsPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    private navCtrl: NavController,
+  ) { }
 
   ngOnInit() {
   }
 
+  goToHome() {
+    this.navCtrl.navigateBack("nurse-home");
+  }
+
+  goToDrugs() {
+    this.navCtrl.navigateForward("nurse-drugs");
+  }
+
+  goToShifts() {
+    this.navCtrl.navigateForward("nurse-shifts");
+  }
+
+  goToSOS() {
+    this.navCtrl.navigateForward("nurse-sos");
+  }
 }
diff --git a/src/app/pages/nurse/home/home.page.html b/src/app/pages/nurse/home/home.page.html
@@ -96,19 +96,19 @@ <h3>CIAO MARIO</h3>
   <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-tab-button class="bottom-bar-buttons" (click)="goToHome()">
           <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="drugs">
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToDrugs()">
           <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/drugs.png"></ion-img>
           Farmaci
         </ion-tab-button>
-        <ion-tab-button class="bottom-bar-buttons" tab="shifts">
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToShifts()">
           <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/booking.png"></ion-img>
           Turni
         </ion-tab-button>
-        <ion-tab-button class="bottom-bar-buttons" tab="sos">
+        <ion-tab-button class="bottom-bar-buttons" (click)="goToSOS()">
           <ion-img class="bottom-bar-icons" src="../../assets/icon/bottom-bar/sos.png"></ion-img>
           SOS
         </ion-tab-button>