Merge pull request #122 from COS301-SE-2023/feature/tutorial

Feature/tutorial

backend/src/main/java/fellowship/mealmaestro/repositories/BrowseRepository.java

@@ -111,7 +111,7 @@ public TransactionCallback<List<MealModel>> getSearchedMealsTransaction(String m
             Values.parameters("namePattern", "(?i).*" + mealName + ".*") // (?i) for case-insensitive
         );
 
-        if (result.hasNext()) {
+        while (result.hasNext()) {
             org.neo4j.driver.Record record = result.next();
             String name = record.get("name").asString();
             String instructions = record.get("instructions").asString();

frontend/src/app/app.component.ts

@@ -2,6 +2,11 @@ import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
 
+//import { register } from 'swiper';
+
+import { register } from 'swiper/element/bundle';
+register();
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',

frontend/src/app/components/tutorial/tutorial.component.html

@@ -0,0 +1,48 @@
+<ion-header>
+  <ion-toolbar class="bar">
+    <ion-title>Tutorial</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="closeModal()">
+        <ion-icon class="closeButton" slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content scrollY="false">
+ <!-- preferneces,pantr,main,browse,recipe -->
+      <swiper-container [loop]="false" pagination="true" navigation="true" (slideChange)="onSlideChange()">
+        <swiper-slide>
+          <div class="slide-background">
+            <img src="assets/preferences.jpg" alt="Background Image">
+          </div>
+          <button (click)="closeModal()" class="link-button">Skip</button>
+        </swiper-slide>
+        <swiper-slide>
+          <img src="assets/Pantry.jpg">
+
+          <button (click)="closeModal()" class="link-button">Skip</button>
+        </swiper-slide>
+        <swiper-slide>
+          <img src="assets/Home.jpg">
+          <button (click)="closeModal()" class="link-button">Skip</button>
+        </swiper-slide>
+        <swiper-slide>
+          <img src="assets/modal.jpg">
+          <button (click)="closeModal()" class="link-button">Skip</button>
+        </swiper-slide>
+        <swiper-slide class="swip">
+          <video #videoPlayer src="assets/Final.mp4" controls autoplay loop muted></video>
+          <button (click)="closeModal()" class="link-but">Skip</button>        
+        </swiper-slide>
+          <swiper-slide>
+          <img src="assets/Browse.jpg">
+          <button (click)="closeModal()" class="link-button">Skip</button>
+        </swiper-slide>
+        <swiper-slide>
+          <img src="assets/Recipe book.jpg">
+          <!-- <button (click)="closeModal()" class="link-button">Skip</button> -->
+        </swiper-slide>
+      </swiper-container>
+
+</ion-content>

frontend/src/app/components/tutorial/tutorial.component.scss

@@ -0,0 +1,125 @@
+  swiper-container {
+    width: 100%;
+    height: 100%;
+  //  background-image: url('https://unsplash.com/photos/a-dirt-road-in-the-middle-of-a-grassy-field-9BKSdvsRSuA');
+
+     // background-color: red;
+  }
+
+  ion-title {
+    font-size: 20px;
+   // font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  .slide-background {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+
+  .link-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px; 
+    font-size: 2.3ch;
+    color: white;
+    background: transparent;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+   // background-color: white;
+  }
+  .link-but {
+    position: fixed;
+    bottom: 20px;
+    right: 20px; 
+    font-size: 2.5ch;
+    color: black;
+    background: transparent;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+   // background-color: white;
+  }
+
+
+
+  swiper-slide {
+      text-align: center;
+      position: relative;
+      // font-size: 18px;
+      // background-color: red;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+  }
+  swiper-button-next { color: red; }
+
+  .closeButton {
+    color: white;
+   // box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+   // text-shadow: 2px 2px black;
+  }
+
+  .bar {
+   // text-shadow: 2px 2px black;
+    color:#53BB63;
+    color: white;
+    --background: #53BB63;
+    //font-size: 12px;
+   // --background: white;
+  }
+
+  .swiper-pagination-bullet-active {
+    background-color: #000 !important;
+}
+
+  // ion-icon {
+  //   text-shadow: 10px 10px 10px blue;
+  // }
+
+  .swiper-container .swiper-button-next,
+  .swiper-container .swiper-button-prev {
+    background-color: #53BB63;
+    color: #53BB63;
+  }
+
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+
+  /* Initial tooltip style, hidden by default */
+.tooltip {
+  display: none;
+  position: absolute;
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  z-index: 9999;
+}
+
+/* Tooltip arrow */
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #333 transparent transparent transparent;
+}

frontend/src/app/components/tutorial/tutorial.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { TutorialComponent } from './tutorial.component';
+
+describe('TutorialComponent', () => {
+  let component: TutorialComponent;
+  let fixture: ComponentFixture<TutorialComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TutorialComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/tutorial/tutorial.component.ts

@@ -0,0 +1,88 @@
+import { Component, ViewChild, ElementRef,OnInit, AfterViewInit , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import {IonicModule } from '@ionic/angular';
+import { AuthenticationService, ErrorHandlerService } from '../../services/services';
+import { CommonModule } from '@angular/common';
+import Swiper from 'swiper';
+
+
+@Component({
+
+  selector: 'app-tutorial',
+  templateUrl: './tutorial.component.html',
+  styleUrls: ['./tutorial.component.scss'],
+  standalone:true,
+  imports: [CommonModule, IonicModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class TutorialComponent implements OnInit, AfterViewInit {
+
+  private swiper: Swiper = {} as Swiper;
+  @ViewChild('swiper') swiperElement!: ElementRef;
+  @ViewChild('videoPlayer') videoPlayer!: ElementRef;
+
+  constructor(private modalController: ModalController, private errorHandlerService: ErrorHandlerService) { }
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    //console.log('called');
+    this.swiper = new Swiper('.swiper-container', {
+      // Swiper configuration options
+      pagination: {
+        el: '.swiper-pagination',
+        type: 'progressbar',
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      on: {
+        slideChange: () => {
+          console.log('slides started');
+          this.onSlideChange();
+        },
+        slideChangeTransitionStart: () => {
+          console.log('transition started');
+          this.onSlideChangeTransitionStart();
+        },
+      },
+    });
+    // this.swiper.on('slideChange', () => {
+    //   console.log("IN FUNCTION")
+    //   this.onSlideChange();
+    // })
+   // console.log('done');
+  }
+
+  onSlideChange() {
+    console.log('slide changed');
+    //if (this.swiper.isEnd) {
+    const video: HTMLVideoElement = this.videoPlayer.nativeElement;
+    const activeSlide = this.swiper.slides[this.swiper.activeIndex];
+    if (activeSlide.classList.contains('swip')) {
+      // If the active slide contains the video, play it
+      video.play();
+    } else {
+      // If the active slide doesn't contain the video, pause it
+      video.pause();
+    }
+    //video.pause();
+   // }
+  }
+
+  onSlideChangeTransitionStart() {
+    console.log('slide started');
+    const video: HTMLVideoElement = this.videoPlayer.nativeElement;
+    video.currentTime = 0; 
+  }
+
+
+  onSwiper(swiper: Swiper) {
+    this.swiper = swiper;
+  }
+
+ closeModal() {
+    this.modalController.dismiss();
+  }
+}

frontend/src/app/pages/acc-profile/acc-profile.page.html

@@ -1,12 +1,18 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>Profile</ion-title>
+    <ion-buttons slot="end">
+      <ion-button class="help-button" (click)="openModal()" title="Help Tutorial!" >
+        <ion-icon name="help-circle-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
     <ion-button size="small" (click)="goBack()"><ion-icon name="arrow-back"></ion-icon>
     </ion-button>
+
     <ion-card>
       <ion-list>
         <ion-item>

frontend/src/app/pages/acc-profile/acc-profile.page.scss

@@ -0,0 +1,19 @@
+
+  .help-button ion-icon {
+    font-size: 24px;
+    --border-radius: 0%;
+    --padding-end: 8px; 
+    font-size: 27px;
+  }
+
+  .help-button{
+    transition: all ease-in-out 0.2s;
+    cursor: pointer;
+    border-radius: 30%;
+    width: 10vw;
+  }
+
+  .help-button:hover{
+    // border: 1px solid #888;
+     background-color: #ddd;
+   }

frontend/src/app/pages/acc-profile/acc-profile.page.ts

@@ -5,6 +5,8 @@ import { IonicModule } from '@ionic/angular';
 import { Router } from '@angular/router';
 import { AuthenticationService } from '../../services/services';
 import { UserI } from '../../models/user.model';
+import { ModalController } from '@ionic/angular';
+import { TutorialComponent } from '../../components/tutorial/tutorial.component';
 
 @Component({
   selector: 'app-acc-profile',
@@ -16,15 +18,25 @@ import { UserI } from '../../models/user.model';
 export class AccProfilePage implements OnInit {
 
   user: UserI;
+  hovered: boolean = false;
+
 
 
-  constructor(private router: Router, private auth: AuthenticationService) {
+  constructor(private router: Router, private auth: AuthenticationService,private modalController: ModalController) {
     this.user = {
       username: '',
       email: '',
       password: ''
     };
    }
+
+   async openModal() {
+      const modal = await this.modalController.create({
+      component: TutorialComponent,
+    });
+
+    await modal.present();
+  }
 
   ngOnInit() {
     this.auth.getUser().subscribe({
@@ -51,4 +63,12 @@ export class AccProfilePage implements OnInit {
     this.auth.logout();
   }
 
+  showTooltip() {
+    this.hovered = true;
+  }
+
+  hideTooltip() {
+    this.hovered = false;
+  }
+
 }