From 16fd49af3fcc57dd836c0986233259ef568bddd4 Mon Sep 17 00:00:00 2001
From: AndriiSyrotenko <andrii.syrotenko.ua@gmail.com>
Date: Sun, 15 Oct 2023 19:34:39 +0000
Subject: [PATCH] SA-55 add cart page

---
 .../Pages/Cart.cshtml                         |  96 +++++++++++++++++-
 .../Pages/Cart.cshtml.cs                      |  13 +++
 .../wwwroot/assets/amazon.png                 | Bin 0 -> 1085 bytes
 .../wwwroot/assets/star.png                   | Bin 0 -> 375 bytes
 4 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 ShoppingAssistantWebClient.Web/wwwroot/assets/amazon.png
 create mode 100644 ShoppingAssistantWebClient.Web/wwwroot/assets/star.png

diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml b/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml
index 5b501af..406d0b8 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml
@@ -2,9 +2,99 @@
 @model ShoppingAssistantWebClient.Web.Pages.CartModel
 @{
 }
+<style>
+    .container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .product-div {
+        height: 310px;
+        width: 200px;
+        border-radius: 10px;
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+        position: relative;
+        padding: 0 10px 0 10px;
+        margin: 30px;
+    }
+    
+    .product-img {
+        height: 130px;
+        width: 100%;
+        align-self: center;
+        display: block;
+        margin: 10px;
+    }
+    .product-description {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .button-amazon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #009FFF;
+        border: none;
+        border-radius: 10px;
+        position: absolute;
+        width: 90%;
+        height: 40px;
+        bottom: 10px;
+    }
+    .star {
+        position: absolute;
+        bottom: 60px;
+    }
+    .rating {
+        position: absolute;
+        bottom: 60px;
+        left: 35px;
+        height: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .button-row {
+        display: flex;
+        align-items: 
+    }
+    .price-label {
+        position: absolute;
+        right: 10px;
+        font-weight: bold;
+        font-size: larger;
+        height: 16px;
+        bottom: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
 
 <h1 style="text-align: center; margin-bottom: 50px">Cart</h1>
-
-<div>
-    
+<div class="container">
+    @foreach (var product in Model.products) {
+        <div class="product-div">
+            <img class="product-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe7MHcuWUvuNJsttl3MEVxEayUGVNH4tA2Ha0K4szpgKvH7QYuiaBa_hCzUgW96I6LXqM&usqp=CAU">
+            <label class="product-description">@Html.DisplayFor(modelproduct => product.Description)</label>
+            <div class="button-row">
+                <img class="star" src="~/assets/star.png">
+                <label class="rating">@Html.DisplayFor(modelproduct => product.Rating)</label>
+                @{
+                    string price = "N/A";
+                    if(!(product.Price is null)) {
+                        price = "$" + product.Price.ToString();
+                    }
+                }
+                <label class="price-label">@price</label>
+            </div>
+            <form class="button">
+                <button class="button-amazon">
+                    <img src="~/assets/amazon.png">
+                </button>
+            </form>
+        </div>
+    }
 </div>
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml.cs b/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml.cs
index 626414f..5d99cb5 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.cshtml.cs
@@ -5,8 +5,21 @@ namespace ShoppingAssistantWebClient.Web.Pages
 {
     public class CartModel : PageModel
     {
+        public List<Product> products = new List<Product> {
+                new Product {Description = "HDMI cabel HDMI cabel HDMI cabel HDMI cabel HDMI cabel HDMI cabelHDMI cabel", Rating = 4.0, Price = 12},
+                new Product {Description = "super mega hdmi cabel", Rating = 3.8, Price = 13.11},
+                new Product {Description = "", Rating = 4.0}
+        };
+    
         public void OnGet()
         {
+
         }
     }
+
+    public class Product {
+        public string Description {get; set;}
+        public double? Rating {get; set;}
+        public double? Price {get; set;}
+    }
 }
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/assets/amazon.png b/ShoppingAssistantWebClient.Web/wwwroot/assets/amazon.png
new file mode 100644
index 0000000000000000000000000000000000000000..45b729e02d4e412f14085975761c9972d6384760
GIT binary patch
literal 1085
zcmV-D1j74?P)<h;3K|Lk000e1NJLTq002w?000*V1^@s6q28$<00009a7bBm000o2
z000o20Vd5lGynhq0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1JX%EK~#7F%~;`e
z;xG&ref@uQ0^A8;1F}K63Bm@n6NFAcJ3-nB+D;HU0d#_-6NH<<ClR?3I>&()a(wUU
z#mHYITaj&<9tc=#BYY$%Ba}YM24#tI*X#8P!86PQ?tkOo6Mp9b`OnBB8@DJi>z`5o
z01E7vIP^5kU86ja9mQSn*qZQ$@4PnHc6J|;vsQLfZf>ye4u89G1HW@GV?Zy=Z5R_d
z2%*nVavvXM<<X~Vpi>*hT=CnG>}fk>*B6T%8UjE_$+6uH#45n|p$zo(*^W{A%;Wcq
z&+lZ`|A8FhfbAEhiy8u!TR$R4UI^tv7@0_RAYci~K-sZ8K+@kT{m5fK6ZVadufe=r
z@N&_Y3Vqt3mp&zOlp)Gk>1WdUfC>Gkz#OWV6IJ@L(D$|95MOap!J&*cqObH#)T$(~
zb+${yf-kp~<kEHEhW3eyYiv?B458lm+prPsLiLr<0`$8<e;?S4Ilv^Q?LFj9@i7&u
zx!aUEaB}SHhBmM-tt&)Z&JQld0OnAid|onr4Vqwxqwoh>V5`%J{K^Ry5cpUekcCju
zY5EA?!>>cg7d!wrXaWTwLb*cu{S)J!;O>AkN|p&!a$Mni*APZ3-YHP-p(9-IGZs3k
zq2AjjdnC+6`<3b+UZSDwnnU$L9iDdTqY8TLrlCz}T?G;@V50_SH*i`Q@cSM4cy_m7
zc9`>qyy8Q^@W);@*fXMC=mOU1Ap~`zkmHf{*IFs_WuH9Ccgg|fLt@N2Sr?UTmn2vG
zocUARju#J?Y~Ofn#|`5f2z@5>iOaAD^);wS%{<Ze)<ZwQn`rmhCy4=da#>L_Fx)j~
zskqzajG6NUb(WFtRoEu1^|fnn*s2yvRg@{y#<ngFDH~kPGLk$wDQQ6YkdSp)qWUNs
zW;~`9`!>vtm_PK)fqYX|C2C%}n6|77)qOI<<SIyd+9^JWOl$j7IzHtgz=I!ZzfHcG
zFYC2!ws|&x$0wc(!be93+E<kv!+(OUSAy@JTEe-32b}RT={#_}>}d0*En#5m>)bYg
zaIUcRzOxOS4b)91^55tE%3b1V94k0y@PKo-9C)cja3XM!BC#Y(-Xh#VGlO#n4_2Q-
zC7&!ap5V8#j{`JfJ1=&3-^y%#a=LoUKnLi-5n$^IeA+;vI*CrEf`!`hN<w#33asI0
z(?1qVsQ#6B7rv>sTB5GA`{dEU8JF1bKca`C<SZV0{B2K7=nzNAFduBSA=4x$u>XH+
z1eb|RsH*es>ZUz#vVduD0BPwN_;<M#P#2${aK`uxfeCDA@{FxG00000NkvXXu0mjf
DQh@(+

literal 0
HcmV?d00001

diff --git a/ShoppingAssistantWebClient.Web/wwwroot/assets/star.png b/ShoppingAssistantWebClient.Web/wwwroot/assets/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..153e1d44da629d9d527328d790b1ceee9996f073
GIT binary patch
literal 375
zcmV--0f_#IP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0Srk*K~#7Fos-Q`
z0znXkzaBl{O(PH@P;UMlBm_dx2*e0nBhd^fGmx@M%aafRn*n>^z=7JKXNqNDmY-!`
z)zr-P_UrC9-2;1If9cq7I@E!Z6J6G?A9}m|WCyva+c+4=IHM(P-6I&b<26ci&WvXc
zRp2w{s@d>f@^n?4sFXP)xo5Z$KsEOD)a5vQ(BMUs+*NX)dU!NS&ZrAZYUGwL)tqoV
z61iirx<vb@H=kDylxX5NcZj>-dfz-iPL<p$K0*cmzSk3~put5kRAG>2TvHX(;2Q$u
zTS^x{Flott%4Io#S#xw#C-mfow%42U6a^ZD9BWuUq6gLZ89yBVPq@-xnQLERUjTr$
VPbrD&dgA~9002ovPDHLkV1i)wmjM6(

literal 0
HcmV?d00001