More products and images in Catalog Seed

src/Services/Catalog/Catalog.API/Controllers/CatalogController.cs

@@ -6,6 +6,7 @@ namespace Microsoft.eShopOnContainers.Services.Catalog.API.Controllers
     using Microsoft.eShopOnContainers.Services.Catalog.API.Infrastructure;
     using Model;
     using System;
+    using System.Collections.Generic;
     using System.Linq;
     using System.Threading.Tasks;
     using ViewModel;
@@ -56,6 +57,8 @@ namespace Microsoft.eShopOnContainers.Services.Catalog.API.Controllers
                 .Take(pageSize)
                 .ToListAsync();
 
+            itemsOnPage = ComposePicUri(itemsOnPage);
+
             var model = new PaginatedItemsViewModel<CatalogItem>(
                 pageIndex, pageSize, totalItems, itemsOnPage);
 
@@ -87,9 +90,11 @@ namespace Microsoft.eShopOnContainers.Services.Catalog.API.Controllers
                 .Take(pageSize)
                 .ToListAsync();
 
+            itemsOnPage = ComposePicUri(itemsOnPage);
+
             var model = new PaginatedItemsViewModel<CatalogItem>(
                 pageIndex, pageSize, totalItems, itemsOnPage);
-
+            
             return Ok(model);
         }
 
@@ -114,5 +119,14 @@ namespace Microsoft.eShopOnContainers.Services.Catalog.API.Controllers
 
             return Ok(items);
         }
+
+        private List<CatalogItem> ComposePicUri(List<CatalogItem> items) {
+            items.ForEach(x =>
+            {
+                x.PictureUri = x.PictureUri.Replace("localhost", Request.Host.Host);
+            });
+
+            return items;
+        }
     }
 }

src/Services/Catalog/Catalog.API/Controllers/PicController.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using System.IO;
+using Microsoft.AspNetCore.Hosting;
+
+// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
+
+namespace Microsoft.eShopOnContainers.Services.Catalog.API.Controllers
+{
+    [Route("api/v1/[controller]")]
+    public class PicController : Controller
+    {
+        private readonly IHostingEnvironment _env;
+        public PicController(IHostingEnvironment env)
+        {
+            _env = env;
+        }
+
+        [HttpGet("{id}")]
+        // GET: /<controller>/
+        public IActionResult GetImage(int id)
+        {
+            var webRoot = _env.WebRootPath;
+            var path = Path.Combine(webRoot, id + ".png");
+            Byte[] b = System.IO.File.ReadAllBytes(path);         
+            return File(b, "image/png");
+        }
+    }
+}

src/Services/Catalog/Catalog.API/Infrastructure/CatalogContextSeed.cs

@@ -74,7 +74,7 @@
             {
                 new CatalogType() { Type = "Mug"},
                 new CatalogType() { Type = "T-Shirt" },
-                new CatalogType() { Type = "Backpack" },
+                new CatalogType() { Type = "Sheet" },
                 new CatalogType() { Type = "USB Memory Stick" }
             };
         }
@@ -83,10 +83,18 @@
         {
             return new List<CatalogItem>()
             {
-                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { CatalogTypeId=1,CatalogBrandId=2, Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = 19.5M, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = 19.5M, PictureUri = "http://localhost:5101/api/v1/pic/1" },
+                new CatalogItem() { CatalogTypeId=1,CatalogBrandId=2, Description = ".NET Black & White Mug", Name = ".NET Black & White Mug", Price= 8.50M, PictureUri = "http://localhost:5101/api/v1/pic/2" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/3" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET Foundation Sweatshirt", Name = ".NET Foundation Sweatshirt", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/4" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = "Roslyn Red Sheet", Name = "Roslyn Red Sheet", Price = 8.5M, PictureUri = "http://localhost:5101/api/v1/pic/5" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET Blue Sweatshirt", Name = ".NET Blue Sweatshirt", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/6" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=2, Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/7"  },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET Purple Sweatshirt", Name = ".NET Purple Sweatshirt", Price = 8.5M, PictureUri = "http://localhost:5101/api/v1/pic/8" },
+                new CatalogItem() { CatalogTypeId=1,CatalogBrandId=1, Description = ".NET T White Mug", Name = ".NET T White Mug", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/9" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET Foundation Sheet", Name = ".NET Foundation Sheet", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/10" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = ".NET T Sheet", Name = ".NET T Sheet", Price = 8.5M, PictureUri = "http://localhost:5101/api/v1/pic/11" },
+                new CatalogItem() { CatalogTypeId=2,CatalogBrandId=1, Description = "Prism White TShirt", Name = "Prism White TShirt", Price = 12, PictureUri = "http://localhost:5101/api/v1/pic/12" }
             };
         }
     }

src/Services/Catalog/Catalog.API/Program.cs

@@ -14,8 +14,10 @@ namespace Microsoft.eShopOnContainers.Services.Catalog.API
         {
             var host = new WebHostBuilder()
                 .UseKestrel()
-                .UseUrls(Environment.GetEnvironmentVariable("ASPNETCORE_URLS") ?? String.Empty)
+                .UseUrls("http://0.0.0.0:5101")
+                .UseIISIntegration()
                 .UseContentRoot(Directory.GetCurrentDirectory())
+                .UseWebRoot("Pics")
                 .UseStartup<Startup>()
                 .Build();
 

src/Services/Catalog/Catalog.API/Properties/launchSettings.json

@@ -3,7 +3,7 @@
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:2418/",
+      "applicationUrl": "http://localhost:5101",
       "sslPort": 0
     }
   },

src/Services/Catalog/Catalog.API/Startup.cs

@@ -1,5 +1,7 @@
 namespace Microsoft.eShopOnContainers.Services.Catalog.API
 {
+    using AspNetCore.Http;
+    using Extensions.FileProviders;
     using Microsoft.AspNetCore.Builder;
     using Microsoft.AspNetCore.Hosting;
     using Microsoft.EntityFrameworkCore;
@@ -9,6 +11,7 @@
     using Microsoft.Extensions.DependencyInjection;
     using Microsoft.Extensions.Logging;
     using System;
+    using System.IO;
     using System.Threading;
     using System.Threading.Tasks;
 
@@ -85,7 +88,6 @@
             loggerFactory.AddConsole(Configuration.GetSection("Logging"));
             loggerFactory.AddDebug();
 
-            // Use frameworks
             app.UseCors("CorsPolicy");
 
             app.UseMvcWithDefaultRoute();

src/Services/Catalog/Catalog.API/project.json

@@ -7,6 +7,7 @@
     "Microsoft.AspNetCore.Mvc": "1.0.1",
     "Microsoft.AspNetCore.Diagnostics": "1.0.0",
     "Microsoft.AspNetCore.Diagnostics.Abstractions": "1.0.0",
+    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
     "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
     "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0",
     "Microsoft.Extensions.Configuration.FileExtensions": "1.0.0",

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss

@@ -41,3 +41,36 @@ body {
 select::-ms-expand {
     display: none;
 }
+
+@media screen and (min-width: 992px) {
+    .form-input {
+        max-width: 360px;
+        width: 360px;
+    }
+}
+
+.form-input {
+    border-radius: 0;
+    height: 45px;
+    padding: 10px;
+}
+
+.form-input-small {
+    max-width: 100px !important;
+}
+
+.form-input-medium {
+    width: 150px !important;
+}
+
+.alert {
+    padding-left: 0;
+}
+
+.alert-danger {
+    background-color: transparent;
+    border: 0;
+    color: #FB0D0D;
+    font-size: 12px;
+}
+

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html

@@ -21,26 +21,31 @@
 </section>
 
 <div class="container">
-    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+    <div *ngIf="catalog?.data.length > 0">
+        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
 
-    <div class="esh-catalog-items row">
-        <div class="esh-catalog-item col-md-4"
-             *ngFor="let item of catalog?.data">
+        <div class="esh-catalog-items row">
+            <div class="esh-catalog-item col-md-4"
+                 *ngFor="let item of catalog?.data">
 
-            <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
-            <button class="esh-catalog-button" (click)="addToCart(item)">
-                [ ADD TO CART ]
-            </button>
+                <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
+                <button class="esh-catalog-button" (click)="addToCart(item)">
+                    [ ADD TO CART ]
+                </button>
 
-            <div class="esh-catalog-name">
-                <span>{{item.name}}</span>
-            </div>
-            <div class="esh-catalog-price">
-                <span>{{item.price}}</span>
+                <div class="esh-catalog-name">
+                    <span>{{item.name}}</span>
+                </div>
+                <div class="esh-catalog-price">
+                    <span>{{item.price}}</span>
+                </div>
             </div>
         </div>
-    </div>
 
-    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+    </div>
+    <div *ngIf="catalog?.data.length == 0">
+        <span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span>
+    </div>
 </div>
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss

@@ -32,21 +32,23 @@
     }
 
     &-placeOrder {
-        background-color: #83D01B;
+        background-color: $color-secondary;
         border: 0;
         border-radius: 0;
-        color: #FFFFFF;
+        color: $color-foreground-brighter;
         display: inline-block;
-        float: right;
-        font-size: 16px;
-        font-weight: normal;
-        height: 45px;
-        margin-bottom: 40px;
-        margin-top: 40px;
-        padding: 10px 20px 10px 20px;
+        font-size: 1rem;
+        font-weight: $font-weight-normal;
+        margin-top: 1rem;
+        padding: 1rem 1.5rem;
         text-align: center;
         text-transform: uppercase;
-        width: 255px;
+        transition: all $animation-speed-default;
+
+        &:hover {
+            background-color: $color-secondary-darker;
+            transition: all $animation-speed-default;
+        }
     }
 
     &-titles {
@@ -92,36 +94,3 @@
         height: $item-height;
     }
 }
-
-
-@media screen and (min-width: 992px) {
-    .form-input {
-        max-width: 360px;
-        width: 360px;
-    }
-}
-
-.form-input {
-    border-radius: 0;
-    height: 45px;
-    padding: 10px;
-}
-
-.form-input-small {
-    max-width: 100px !important;
-}
-
-.form-input-medium {
-    width: 150px !important;
-}
-
-.alert {
-    padding-left: 0;
-}
-
-.alert-danger {
-    background-color: transparent;
-    border: 0;
-    color: #FB0D0D;
-    font-size: 12px;
-}