Merge pull request #44 from COS301-SE-2023/dev

Demo One

apps/app/src/main.ts

@@ -1,6 +1,5 @@
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { CoreModule } from '@fridge-to-plate/app/core';
-
 platformBrowserDynamic()
   .bootstrapModule(CoreModule)
   .catch((err) => console.error(err));

apps/app/tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
         'background-light': '#F8F8F8',
         'background-dark': '#010127',
         'primary': '#C35214',
+        'recipe-card-overlay': 'rgba(52,52,52,0.64)',
         'primary-highlight': '#E26310',
         'accept': '#2bc917',
         'reject': '#d70b0b'

libs/app/core/src/core.module.ts

@@ -5,13 +5,25 @@ import { NxWelcomeComponent } from "./nx-welcome.component";
 import { CoreRouting } from "./core.routing";
 import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
 import { RouteReuseStrategy } from "@angular/router";
+import { LoginModule } from '@fridge-to-plate/app/login/feature';
+import { TabbedComponent } from "./tabbed-component/tabbed-component";
+import { NzStepsModule } from "ng-zorro-antd/steps";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { ReactiveFormsModule } from "@angular/forms";
 
 @NgModule({
-  declarations: [CoreShell, NxWelcomeComponent],
+  declarations: [CoreShell, NxWelcomeComponent, TabbedComponent],
   imports: [
     BrowserModule,
-     CoreRouting,
-    IonicModule.forRoot()],
+    LoginModule,
+    CoreRouting,
+    ReactiveFormsModule,
+    IonicModule.forRoot(),
+    NzStepsModule, 
+    NzFormModule, 
+    NzIconModule
+  ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [CoreShell],
 })

libs/app/core/src/core.routing.ts

@@ -7,8 +7,27 @@ const routes: Routes = [
         path: '',
         pathMatch: 'full',
         component: NxWelcomeComponent,
+    }, 
+    { 
+        path: 'recommendations', 
+        loadChildren: () => import('@fridge-to-plate/app/recipe-recommendation').then((m) => m.AppRecipeRecommendationModule),
+    },
+    {
+        path: 'login',
+        loadChildren: () => import('@fridge-to-plate/app/login/feature').then((m) => m.LoginModule),
+    },
+    {
+        path: 'signup',
+        loadChildren: () => import('@fridge-to-plate/app/signup/feature').then((m) => m.SignupModule),
+    },
+    {
+        path: 'profile',
+        loadChildren: () => import('@fridge-to-plate/app/profile/feature').then((m) => m.ProfileModule),
+    },
+    {
+        path: 'create',
+        loadChildren: () => import('@fridge-to-plate/app/create/feature').then((m) => m.CreateModule),
     },
-
 ];
 
 @NgModule({

libs/app/core/src/core.shell.html

@@ -1,3 +1,3 @@
 <ion-app>
     <ion-router-outlet></ion-router-outlet>
-</ion-app>
+</ion-app>

libs/app/core/src/nx-welcome.component.ts

@@ -9,7 +9,7 @@ import { Component, ViewEncapsulation } from "@angular/core";
     color: #ff69b4;
     text-align: center;
   }
-  
+
   h2 {
     font-size: 24px;
     font-weight: normal;

libs/app/core/src/tabbed-component/tabbed-component.html

@@ -0,0 +1,3 @@
+<div>
+Menu
+</div>

libs/app/core/src/tabbed-component/tabbed-component.scss

@@ -0,0 +1,8 @@
+.page-container {
+  background-color:#F8F8F8;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-rows: repeat(12, minmax(0,1fr));
+  grid-template-columns: repeat(12, minmax(0,1fr));
+}

libs/app/core/src/tabbed-component/tabbed-component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabbed-component',
+  templateUrl: './tabbed-component.html',
+  styleUrls: ['./tabbed-component.scss']
+})
+export class TabbedComponent {
+
+}

libs/app/create/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "fridgeToPlate",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "fridge-to-plate",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/app/create/README.md

@@ -0,0 +1,7 @@
+# app-create
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test app-create` to execute the unit tests.

libs/app/create/feature/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "fridgeToPlate",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "fridge-to-plate",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/app/create/feature/README.md

@@ -0,0 +1,7 @@
+# app-create-feature
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test app-create-feature` to execute the unit tests.

libs/app/create/feature/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'create',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/app/create/feature',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/app/create/feature/project.json

@@ -0,0 +1,34 @@
+{
+  "name": "create",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/app/create/feature/src",
+  "prefix": "fridge-to-plate",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/app/create/feature/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/app/create/feature/**/*.ts",
+          "libs/app/create/feature/**/*.html"
+        ]
+      }
+    }
+  }
+}

libs/app/create/feature/src/create.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { CreateRouting } from './create.routing'
+import { CreatePage } from './create.page';
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  imports: [
+    CommonModule, 
+    ReactiveFormsModule,
+    FormsModule,
+    CreateRouting,
+    IonicModule,
+  ],
+  declarations: [CreatePage],
+})
+export class CreateModule {}

libs/app/create/feature/src/create.page.html

@@ -0,0 +1,77 @@
+<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()" class="overflow-y-auto bg-white rounded-md shadow-md p-4">
+  <div class="flex justify-center space-y-6">
+    <img
+    src="https://photos.bigoven.com/recipe/hero/lowfat-vegetable-lasagna-1336994.jpg"
+    class="h-25 rounded-lg shadow-none transition-shadow duration-300 ease-in-out hover:shadow-lg hover:shadow-black/30"
+    alt="Recipe Image" />
+  </div>
+  <br>
+  <div class="mb-4">
+    <label for="name" class="block text-gray-700 font-bold mb-2">Recipe Name<span class="text-orange-500">*</span></label>
+    <input type="text" id="name" formControlName="name" placeholder="Name" class="w-full bg-gray-200 border border-gray-400 p-2 rounded-2xl" required>
+  </div>
+
+  <div class="mb-4">
+    <label for="description" class="block text-gray-700 font-bold mb-2">Recipe Description<span class="text-red-500">*</span></label>
+    <textarea id="description" placeholder="Description" formControlName="description" class="w-full bg-gray-200 border border-gray-400 p-2 rounded-2xl" required></textarea>
+  </div>
+
+   <div class="mb-4">
+    <div class="flex justify-between mb-4">
+      <label for="ingredients" class="block text-gray-700 font-bold mr-2">Ingredients<span class="text-red-500">*</span></label>
+      <button type="button" (click)="addIngredient()" class="bg-orange-700 text-white py-1 px-4  rounded-none hover:bg-orange-500">Add</button>
+    </div>
+    <div formArrayName="ingredients">
+      <div *ngFor="let ingredientControl of ingredientControls; let i = index" class="mb-2 ">
+        <div class="flex items-center">
+          <input type="text" placeholder="Add Ingredient" id="ingredient-{{i}}" [formControlName]="i" class="w-full bg-gray-200 border border-gray-400 p-2 rounded-2xl" [readonly]="i !== instructionControls.length - 1" required>
+          <button type="button" (click)="addIngredient()"><ion-icon name="create-outline" size="large"></ion-icon>
+          </button>
+          <button type="button" (click)="removeIngredient(i)"><ion-icon name="trash-outline" size="large" style="color: red;"></ion-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>  
+
+  <div class="mb-4">
+    <div class="flex justify-between mb-4">
+      <label for="instructions" class="block text-gray-700 font-bold mr-2">Instructions<span class="text-red-500">*</span></label>
+      <button type="button" (click)="addInstruction()" class="bg-orange-700 text-white py-1 px-4  rounded-none hover:bg-orange-500">Add</button>
+    </div>
+    <div formArrayName="instructions">
+      <div *ngFor="let instructionControl of instructionControls; let i = index" class="mb-2 ">
+        <div class="flex items-center">
+          <input type="text" placeholder="Add Instruction" id="instruction-{{i}}" [formControlName]="i" class="w-full bg-gray-200 border border-gray-400 p-2 rounded-2xl"  [readonly]="i !== instructionControls.length - 1" required>
+          <button type="button" (click)="editInstruction(i)"><ion-icon name="create-outline" size="large"></ion-icon>
+          </button>
+          <button type="button" (click)="removeInstruction(i)"><ion-icon name="trash-outline" size="large" style="color: red;"></ion-icon></button>
+        </div>
+      </div>
+    </div>
+  </div> 
+
+  <div class="mb-4">
+    <label for="servings" class="block text-gray-700 font-bold mb-2">Number of Servings<span class="text-red-500">*</span></label>
+    <input type="number" id="servings" placeholder="e.g 10" formControlName="servings" class="w-full bg-gray-200 border border-gray-400 p-2 rounded-2xl">
+  </div>
+
+  <div class="mb-4">
+    <label for="preparation-time" class="block text-gray-700 font-bold mb-2">Preparation Time (in minutes)<span class="text-red-500">*</span></label>
+    <input type="number" id="preparation-time" placeholder="e.g 10" formControlName="preparationTime" class="w-full bg-gray-300 border border-gray-400 p-2 rounded-2xl" required>
+  </div>
+  <div class="mb-4">
+    <label class="block text-gray-700 font-bold mb-2">Dietary Plans</label>
+    <div class="flex justify-between">
+      <button type="button" [ngClass]="getDietaryPlanButtonClasses('vegetarian')" (click)="toggleDietaryPlan('vegetarian')" class="bg-gray-300 text-gray-700 py-2 px-4 rounded-md mr-2">Vegetarian</button>
+      <button type="button" [ngClass]="getDietaryPlanButtonClasses('vegan')" (click)="toggleDietaryPlan('vegan')" class="bg-gray-300 text-gray-700 py-2 px-4 rounded-md mr-2">Vegan</button>
+      <button type="button" [ngClass]="getDietaryPlanButtonClasses('ketogenic')" (click)="toggleDietaryPlan('ketogenic')" class="bg-gray-300 text-gray-700 py-2 px-4 rounded-md mr-2">Ketogenic</button>
+      <button type="button" [ngClass]="getDietaryPlanButtonClasses('paleo')" (click)="toggleDietaryPlan('paleo')" class="bg-gray-300 text-gray-700 py-2 px-4 rounded-md mr-2">Paleo</button>
+    </div>
+  </div>
+
+  <div class=" flex justify-center">
+    <button type="submit" class="flex justify-center bg-orange-700 text-white hover:bg-orange-500 py-2 px-4 rounded-md">Create Recipe</button>
+  </div>
+
+</form>