Add permanent menu, don't show empty menus

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { MenuComponent } from './menu/menu.component';
 import { MealComponent } from './meal/meal.component';
 import { RestaurantsComponent } from './restaurants/restaurants.component';
 import { HttpClientModule } from '@angular/common/http';
+import { PermanentComponent } from './permanent/permanent.component';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { HttpClientModule } from '@angular/common/http';
     RestaurantComponent,
     MenuComponent,
     MealComponent,
-    RestaurantsComponent
+    RestaurantsComponent,
+    PermanentComponent
   ],
   imports: [
     BrowserModule,

src/app/meal/meal.component.html

@@ -1,4 +1,4 @@
-<div class="row meal {{ meal.isSoup ? 'soup' : '' }}">
+<div class="row meal {{ meal.isSoup ? 'soup' : '' }} {{ index == 0 ? 'firstmeal' : '' }}">
     <div class="col-sm-12">
         <div class="info">
             <div class="mealname">

src/app/meal/meal.component.ts

@@ -8,6 +8,7 @@ import { Meal } from '../models/meal/Meal';
 })
 export class MealComponent implements OnInit {
   @Input() meal: Meal;
+  @Input() index: number;
 
   constructor() { }
 

src/app/menu/menu.component.html

@@ -1,6 +1,6 @@
-<div class="row menu">
+<div class="row menu" *ngIf="menu.meals.length > 0">
     <div class="mealday">Day: {{menu.day}}</div>
     <div class="meals col-sm-12">
-        <app-meal *ngFor="let meal of menu.meals" [meal]="meal"></app-meal>
+        <app-meal *ngFor="let meal of menu.meals; let i = index" [meal]="meal" [index]="i"></app-meal>
     </div>
 </div>

src/app/models/restaurant/Restaurant.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Menu } from '../menu/Menu';
+import { Meal } from '../meal/Meal';
 
 export interface Adapter<T> {
   adapt(item: any): T;
@@ -7,18 +8,21 @@ export interface Adapter<T> {
 
 export class Restaurant {
   restaurant: string;
-  menus: Menu[];
+  daily: Menu[];
+  permanent: Meal[];
 
   constructor(
     restaurant: string,
-    menus: Menu[],
+    dailymenus: Menu[],
+    permanentmeals: Meal[],
   ) {
       this.restaurant = restaurant;
-      this.menus = menus;
+      this.daily = dailymenus;
+      this.permanent = permanentmeals;
   }
 
   addMenu(menu: Menu): void {
-      this.menus.push(menu);
+      this.daily.push(menu);
   }
 }
 
@@ -28,7 +32,7 @@ export class Restaurant {
 export class RestaurantAdapter implements Adapter<Restaurant> {
   adapt(item: any): Restaurant {
     if (item) {
-      return new Restaurant(item.restaurant, item.menus);
+      return new Restaurant(item.restaurant, item.dailymenus, item.permanentmeals);
     }
     return item;
   }

src/app/permanent/permanent.component.html

@@ -0,0 +1,6 @@
+<div class="row menu">
+    <div class="mealday">Permanent menu</div>
+    <div class="meals col-sm-12">
+        <app-meal *ngFor="let meal of meals; let i = index" [meal]="meal" [index]="i"></app-meal>
+    </div>
+</div>

src/app/permanent/permanent.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PermanentComponent } from './permanent.component';
+
+describe('PermanentComponent', () => {
+  let component: PermanentComponent;
+  let fixture: ComponentFixture<PermanentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PermanentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PermanentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/permanent/permanent.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Meal } from '../models/meal/Meal';
+
+@Component({
+  selector: 'app-permanent',
+  templateUrl: './permanent.component.html',
+  styleUrls: ['./permanent.component.css']
+})
+export class PermanentComponent implements OnInit {
+  @Input() meals: Meal[];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/restaurant/restaurant.component.html

@@ -2,7 +2,8 @@
     <div class="col-sm-12">
         <button style="width: 100%;" type="button" class="btn" data-toggle="collapse" [attr.data-target]="'#menu-col'+ index">{{restaurant.restaurant}}</button>
         <div class="collapse" id="menu-col{{index}}">
-            <app-menu *ngFor="let menu of restaurant.menus" [menu]="menu"></app-menu>
+            <app-menu *ngFor="let menu of restaurant.daily" [menu]="menu"></app-menu>
+            <app-permanent [meals]="restaurant.permanent" *ngIf="restaurant.permanent.length > 0"></app-permanent>
         </div>
     </div>
 </div>

src/app/restaurants/restaurants.component.ts

@@ -32,7 +32,7 @@ export class RestaurantsComponent implements OnInit {
     const dayName = this.days[d.getDay()];
     this.lunchService.getRestaurantsForDay(dayName).subscribe( restaurants => {
       for (let i = 0; i < restaurants.length; i++) {
-        this.restaurants[i].menus = restaurants[i].menus;
+        this.restaurants[i].daily = restaurants[i].daily;
       }
     });
   }
@@ -40,7 +40,7 @@ export class RestaurantsComponent implements OnInit {
   getAllDaysUpdate(): void {
     this.lunchService.getRestaurants().subscribe( restaurants => {
       for (let i = 0; i < restaurants.length; i++) {
-        this.restaurants[i].menus = restaurants[i].menus;
+        this.restaurants[i].daily = restaurants[i].daily;
       }
     });
   }

src/styles.css

@@ -16,6 +16,7 @@
 
 .price {
     float: right;
+    font-family: "Courier New";
 }
 
 .mealday {
@@ -39,6 +40,10 @@
 }
 
 .soup {
+    background: #ffe4;
+}
+
+.firstmeal {
     border-top: 0px solid black !important;
 }