From 6d3a9fad5fd98018f085f15184067e402b05e146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Kura=C5=84da?= <kuranda.marek@gmail.com>
Date: Tue, 23 Aug 2022 14:31:53 +0200
Subject: [PATCH] Render no image photo

---
 IDEAS.md                               |   1 +
 public/css/meals-add-new.css           |   4 +-
 public/icons/no-image.png              | Bin 0 -> 1006 bytes
 src/YummyData.ts                       |   6 ++
 src/YummyRouter.ts                     |  10 +--
 views/layouts/meals-add-new.handlebars |   8 ++-
 views/layouts/result.handlebars        |   6 +-
 views/layouts/search.handlebars        |  88 ++-----------------------
 8 files changed, 28 insertions(+), 95 deletions(-)
 create mode 100644 public/icons/no-image.png

diff --git a/IDEAS.md b/IDEAS.md
index 564d67d..9b40b3a 100644
--- a/IDEAS.md
+++ b/IDEAS.md
@@ -8,6 +8,7 @@
 -   Edition of existing meals - you can edit anything you want apart from the title - because it occurs as the name.
 -   Each result has a property called `relevance` - could be measured as a percentage. The found results should be sorted according to the this property.
 -   Better handling MongoDB errors - types of errors and their communicates.
+-   Improved README and guide for developers how to add ingredients and other things.
 
 ## Bugs
 
diff --git a/public/css/meals-add-new.css b/public/css/meals-add-new.css
index ac1a031..a662aaa 100644
--- a/public/css/meals-add-new.css
+++ b/public/css/meals-add-new.css
@@ -31,8 +31,8 @@ body {
     margin-left: 0.5em;
 }
 
-.new-meal-ingredients-container > ul > li > i + span {
-    margin-left: 0.5em;
+.new-meal-ingredients-container > ul > li > img + span {
+    margin-left: 0.2em;
 }
 
 .new-meal-ingredients-container > ul > li > span {
diff --git a/public/icons/no-image.png b/public/icons/no-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1ff5970a56d3d5cb030d7bbd61f61ef7798ee97
GIT binary patch
literal 1006
zcmV<K0}=d*P)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz00006VoOIv0RI60
z0RN!9r;`8x1EWbqK~#90?cBX?)Ib!5;WrQxi2@{wNGL!{%>{4+6c8aIDClWOT5f?$
zfSw|vq00>*k<bt%3g{3ZkPsB0K*L`syeq<HcE^rq<{aDKC!Hqi9gpYH*xreEK~WS%
zQPO1<_zb)UR*d^H_{;&HfW1-u1g@L*NZ}*@K!oBTSE&$$;waZRi1G`#Y1yfvM<@;>
z6o(Ot!wAJ;gkqFE;3aT6@LC8()vlr$ZzvRJAVP5nA{2)pv!V-q^JE19p)^f)5D-d}
z6afLD)J-uE5K5gC1p%SNQXB+?GAkw^Ae3n_0|B9gVhRF6nT$CI2xWg<fPhfOaRUO?
zqeNaGF<J!Hfo<U1sJ4N%(QB#V3Iu$jECbIuc<kfa8Eumy?m)m7$|AEd_M@bjDK0_4
z56U`mjB(vgus^pT-~;6;^+C20?9Vj_*x!BaQXgbD!T#KXfGtWBkgo~$*9j1?JALVt
zH6s=%Yt#qn^+kOSI1%`JX_Q5(TiO`L4zQ45e=b3e0QZ0wz*6A#(kRQ!M(Onj!(+h4
zzV^MKEKr@2wx}-jyTFst-%`wsaa@5M2Q~xyX!0;#*B2z+fSd##2ihMRiVKh>;8~#U
zA)=UroC973+8rv2Dad)?O`y#oqnLqQ;NXuC2*n8GBJd^9mQV~pE&<;I?FgkxQIH$J
zk3bu3tHg)L72w^da{dZZF_2rp@4)-JFjH11+Q>Q6ih$e!{si9J1(ZpQ+$dQ==776_
z_jCni8b(f(Y#>K~`+@Ddf)c~Xg^~qif&W)*yM|I1BL_-ykZCKnT|sGzks2i_NNmN{
zqMF_kxA|^;ivPzX1F5@W>wTuQt+q2I2}siwTdSFJDsViZnbNk}%#_w3hh4EPT@Qiz
zDaYh#rnClWvtnDSHkghvj+dFz8pL~rFy`@l`sy`E=rnZ{c!1vveQ!Y?5uO=`eZ;73
z)txE51vxX(?@0`=D1!i*hT##Vw;-ETC}*ioU$O1Ip!62xFy-MwFOZ3{MiEG$EKvk9
zrL0f{GNUX|1QMyzcV7ajQI<az9gX$i3=Jh3>wy^>N;KAkVqK+CqOl$j4^<K+8tcLE
zQl(I$u^tFdRRSd%>p}2Vxly9A9srM(6D1n!gZEmwP@=IuaL<(kB^v94_Fkz`l#J=>
z7g2j1p*W0C97ZS(BNT@bio;C%dfgSvP7OUFl((imQVyVeu<ecl)oJQA)$F)z+!sYr
c6s1S`3!Hzy6|gWS+5i9m07*qoM6N<$f<cM5od5s;

literal 0
HcmV?d00001

diff --git a/src/YummyData.ts b/src/YummyData.ts
index 735765b..5514e4d 100644
--- a/src/YummyData.ts
+++ b/src/YummyData.ts
@@ -61,6 +61,12 @@ export const icons = {
         undefined,
         "https://icons8.com/icon/13296/list-view"
     ),
+    noImage: new Icon(
+        "no-image",
+        "",
+        undefined,
+        "https://icons8.com/icon/1G2BW7-tQJJJ/no-image"
+    ),
     // Food - berries
     blueberry: new Icon(
         "blueberry",
diff --git a/src/YummyRouter.ts b/src/YummyRouter.ts
index c0cd562..2b9c495 100644
--- a/src/YummyRouter.ts
+++ b/src/YummyRouter.ts
@@ -85,13 +85,7 @@ export class YummyRouter {
             },
             mealTypes: mealTypes,
             meals: meals,
-        });
-    }
-
-    private result(req: Request, res: Response): void {
-        res.render("result", {
-            elements: elements.result,
-            isNotMain: res.req.url !== "/",
+            noImage: icons.noImage,
         });
     }
 
@@ -114,6 +108,7 @@ export class YummyRouter {
             meal: meal,
             ingredients: ings,
             sourceUrl: `/search?${res.req.url.split("?")[1] ?? ""}`,
+            noImage: icons.noImage,
         });
     }
 
@@ -168,6 +163,7 @@ export class YummyRouter {
                 meal: newMeal,
                 mealType: Type[newMeal.type as keyof typeof Type],
                 ingredients: ings,
+                noImage: icons.noImage,
             });
         } catch (err: any) {
             console.log(err);
diff --git a/views/layouts/meals-add-new.handlebars b/views/layouts/meals-add-new.handlebars
index 943f413..cf5893c 100644
--- a/views/layouts/meals-add-new.handlebars
+++ b/views/layouts/meals-add-new.handlebars
@@ -11,7 +11,13 @@
                 <div><h3>{{meal.title}}</h3></div>
                 <div><p>{{meal.description}}</p></div>
                 <div><p>{{mealType}}</p></div>
-                <div class="flex-center"><img src="../../uploads/{{meal.image}}" alt="{{meal.title}} photo" width="256" /></div>
+                <div class="flex-center">
+                    {{#if meal.image}}
+                    <img src="../../uploads/{{meal.image}}" alt="{{meal.title}} photo" width="256" />
+                    {{else}}
+                    <img src="../../icons/no-image.png" alt="{{meal.title}} no photo" width="256" />
+                    {{/if}}
+                </div>
                 <div class="new-meal-ingredients-container">
                     <ul>
                         {{#each ingredients as |ing|}}
diff --git a/views/layouts/result.handlebars b/views/layouts/result.handlebars
index 7247651..f7bbda7 100644
--- a/views/layouts/result.handlebars
+++ b/views/layouts/result.handlebars
@@ -4,7 +4,11 @@
             ></i>Wróć do wyszukiwania</a></div>
     <div class="result-container">
         <div class="result-image"><img
-                src="{{prefixPath}}uploads/{{meal.image}}"
+                {{#if meal.image}}
+                src="{{#if meal.image}}{{prefixPath}}uploads/{{meal.image}}{{else}}{{/if}}"
+                {{else}}
+                src="{{prefixPath}}icons/no-image.png"
+                {{/if}}
                 alt="Zdjęcie posiłku o nazwie {{meal.title}}"
             /></div>
         <div class="result-details">
diff --git a/views/layouts/search.handlebars b/views/layouts/search.handlebars
index 41f64d5..e5ab43f 100644
--- a/views/layouts/search.handlebars
+++ b/views/layouts/search.handlebars
@@ -55,7 +55,11 @@
         {{#each meals as |meal| }}
         <div class="result-container flex-center">
             <div class="result-image">
+                {{#if meal.image}}
                 <img src="uploads/{{meal.image}}" alt="Zdjęcie posiłku o nazwie {{meal.title}}" />
+                {{else}}
+                <img src="icons/no-image.png" alt="Brak zdjęcia posiłku o nazwie {{meal.title}}" />
+                {{/if}}
             </div>
             <div class="result-label">
                 <div class="result-description">
@@ -68,90 +72,6 @@
             </div>
         </div>
         {{/each}}
-        <div class="result-container flex-center">
-            <div class="result-image">
-                <img src="img/berries.jpg" alt="img-title" />
-            </div>
-            <div class="result-label">
-                <div class="result-description">
-                    <div class="result-title">Tytuł</div>
-                    <div class="result-text">Opis tego czegoś</div>
-                </div>
-                <div class="result-button flex-center">
-                    <button>Zobacz</button>
-                </div>
-            </div>
-        </div>
-        <div class="result-container flex-center">
-            <div class="result-image">
-                <img src="img/berries.jpg" alt="img-title" />
-            </div>
-            <div class="result-label">
-                <div class="result-description">
-                    <div class="result-title">Tytuł</div>
-                    <div class="result-text">Opis tego czegoś</div>
-                </div>
-                <div class="result-button flex-center">
-                    <button>Zobacz</button>
-                </div>
-            </div>
-        </div>
-        <div class="result-container flex-center">
-            <div class="result-image">
-                <img src="img/berries.jpg" alt="img-title" />
-            </div>
-            <div class="result-label">
-                <div class="result-description">
-                    <div class="result-title">Tytuł</div>
-                    <div class="result-text">Opis tego czegoś</div>
-                </div>
-                <div class="result-button flex-center">
-                    <button>Zobacz</button>
-                </div>
-            </div>
-        </div>
-        <div class="result-container flex-center">
-            <div class="result-image">
-                <img src="img/berries.jpg" alt="img-title" />
-            </div>
-            <div class="result-label">
-                <div class="result-description">
-                    <div class="result-title">Tytuł</div>
-                    <div class="result-text">Opis tego czegoś</div>
-                </div>
-                <div class="result-button flex-center">
-                    <button>Zobacz</button>
-                </div>
-            </div>
-        </div>
-        <div class="result-container flex-center">
-            <div class="result-image">
-                <img src="img/berries.jpg" alt="img-title" />
-            </div>
-            <div class="result-label">
-                <div class="result-description">
-                    <div class="result-title">Tytuł</div>
-                    <div class="result-text">Opis tego czegoś</div>
-                </div>
-                <div class="result-button flex-center">
-                    <button>Zobacz</button>
-                </div>
-            </div>
-        </div>
-        <div class="result-container flex-center">
-            <div class="result-image">
-                <img src="img/berries.jpg" alt="img-title" />
-            </div>
-            <div class="result-label">
-                <div class="result-description">
-                    <div class="result-title">Tytuł</div>
-                    <div class="result-text">Opis tego czegoś</div>
-                </div>
-                <div class="result-button flex-center">
-                    <button>Zobacz</button>
-                </div>
-            </div>
-        </div>
     </section>
     <section id="adder">
         <div class="flex-center"><p>Brakuje szukanego posiłku? Dodaj go!</p></div>