finish Project basic
This commit is contained in:
parent
41477dc29a
commit
3409bdb858
@ -1,7 +1,9 @@
|
||||
<app-header></app-header>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>I'm working!</h2>
|
||||
<app-recipes></app-recipes>
|
||||
<app-shopping-list></app-shopping-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4,9 +4,6 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||
import { AppComponent } from './app.component';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
import { RecipesComponent } from './recipes/recipes.component';
|
||||
import { RecipesListComponent } from './recipes/recipes-list/recipes-list.component';
|
||||
import { RecipesDetailComponent } from './recipes/recipes-detail/recipes-detail.component';
|
||||
import { RecipesItemComponent } from './recipes/recipe-list/recipes-item/recipes-item.component';
|
||||
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
|
||||
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
|
||||
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
|
||||
@ -18,9 +15,6 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
|
||||
AppComponent,
|
||||
HeaderComponent,
|
||||
RecipesComponent,
|
||||
RecipesListComponent,
|
||||
RecipesDetailComponent,
|
||||
RecipesItemComponent,
|
||||
RecipeListComponent,
|
||||
RecipeDetailComponent,
|
||||
RecipeItemComponent,
|
||||
|
||||
@ -1 +1,22 @@
|
||||
<p>header works!</p>
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a href="#" class="navbar-brand">Recipe Book</a>
|
||||
</div>
|
||||
<div class="navbar-default">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#">Recipe</a></li>
|
||||
<li><a href="#">Shopping List</a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" role="button">Manage<span Class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a>/li>href="#">Saving data</a></li>
|
||||
<li><a href="#">Fetching data</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1 +1,36 @@
|
||||
<p>recipe-detail works!</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<img src="" alt="" class="img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1>Recipe Name</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary dropdown-toggle">
|
||||
Manage Recipe <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">To Shopping List</a></li>
|
||||
<li><a href="#">Edit Recipe</a></li>
|
||||
<li><a href="#">Delete Recipe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
Ingredients
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ export class RecipeDetailComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1 +1,3 @@
|
||||
<p>recipe-item works!</p>
|
||||
<p>
|
||||
recipe-item works!
|
||||
</p>
|
||||
|
||||
@ -9,7 +9,7 @@ export class RecipeItemComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1 +1,28 @@
|
||||
<p>recipe-list works!</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button class="btn btn-success">New Recipe</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<a
|
||||
href="#"
|
||||
class="list-group-item clearfix"
|
||||
*ngFor="let recipe of recipes">
|
||||
<div class="pull-left">
|
||||
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
|
||||
<p class="list-group-item-text">{{ recipe.description }}</p>
|
||||
</div>
|
||||
<span class="pull-right">
|
||||
<img
|
||||
[src]="recipe.imagePath"
|
||||
alt="{{ recipe.name }}"
|
||||
class="img-responsive"
|
||||
style="max-height: 50px;">
|
||||
</span>
|
||||
</a>
|
||||
<app-recipe-item></app-recipe-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Recipe } from '../recipe.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-recipe-list',
|
||||
templateUrl: './recipe-list.component.html',
|
||||
styleUrls: ['./recipe-list.component.css']
|
||||
})
|
||||
export class RecipeListComponent implements OnInit {
|
||||
recipes: Recipe[] = [
|
||||
new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
|
||||
new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
11
project/src/app/recipes/recipe.model.ts
Normal file
11
project/src/app/recipes/recipe.model.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export class Recipe {
|
||||
public name: string;
|
||||
public description: string;
|
||||
public imagePath: string;
|
||||
|
||||
constructor(name: string, desc: string, imagePath: string) {
|
||||
this.name = name;
|
||||
this.description = desc;
|
||||
this.imagePath = imagePath;
|
||||
}
|
||||
}
|
||||
@ -1 +1,8 @@
|
||||
<p>recipes works!</p>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<app-recipe-list></app-recipe-list>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<app-recipe-detail></app-recipe-detail>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ export class RecipesComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
4
project/src/app/shared/ingredient.model.ts
Normal file
4
project/src/app/shared/ingredient.model.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export class Ingredient {
|
||||
// short form that sets the property and asign the value to them
|
||||
constructor(public name: string, public amount: number) {}
|
||||
}
|
||||
@ -1 +1,23 @@
|
||||
<p>shopping-edit works!</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" class="form-control">
|
||||
</div>
|
||||
<div class="col-sm-2 form-group">
|
||||
<label for="amount">Amount</label>
|
||||
<input type="number" id="amount" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button class="btn btn-success" type="submit">Add</button>
|
||||
<button class="btn btn-danger" type="button">Delete</button>
|
||||
<button class="btn btn-primary" type="button">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ export class ShoppingEditComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1 +1,15 @@
|
||||
<p>shopping-list works!</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-10">
|
||||
<app-shopping-edit></app-shopping-edit>
|
||||
<hr>
|
||||
<ul class="list-group">
|
||||
<a
|
||||
class="list-group-item"
|
||||
style="cursor: pointer"
|
||||
*ngFor="let ingredient of ingredients"
|
||||
>
|
||||
{{ ingredient.name }} ({{ ingredient.amount }})
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Ingredient } from '../shared/ingredient.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shopping-list',
|
||||
templateUrl: './shopping-list.component.html',
|
||||
styleUrls: ['./shopping-list.component.css']
|
||||
})
|
||||
export class ShoppingListComponent implements OnInit {
|
||||
ingredients: Ingredient[] = [
|
||||
new Ingredient('Apples', 5),
|
||||
new Ingredient('Tomatoes', 10),
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user