Show business item image

assets/templates/base.html

@@ -25,6 +25,7 @@
     <article>
         <ow-nav>
             <ow-path path="/" selected="{{ page.select_index() }}">Lokalne Usługi</ow-path>
+            <ow-path path="/" selected="{{ page.select_marketplace() }}">Targ</ow-path>
             <ow-path path="/news" selected="{{ page.select_news() }}">Aktualności</ow-path>
             <ow-path path="/account" selected="{{ page.select_account() }}">Konto</ow-path>
             {% match account.as_ref() %}

assets/templates/index.html

@@ -13,7 +13,12 @@
         {% endfor %}
 
         {% for item in service.items %}
-        <local-business-item slot="item" name="{{item.name}}" price="{{item.price}}">
+        <local-business-item
+                slot="item"
+                name="{{item.name}}"
+                price="{{item.price}}"
+                picture-url="{{item.picture_url}}"
+        >
         </local-business-item>
         {% endfor %}
 

client/dist/app.js

@@ -111,7 +111,13 @@ class Component extends HTMLElement {
             mode: "open"
         }), this.#a.innerHTML = a;
     }
-    connectedCallback() {}
+    connectedCallback() {
+        let a = this.constructor.observedAttributes;
+        if (Array.isArray(a)) for (let b of a){
+            let c = this.constructor.attr2Field(b);
+            c && (this[c] = this[c]);
+        }
+    }
     attributeChangedCallback(a, b, c) {
         if (b === c) return;
         let d = this.constructor.observedAttributes;
@@ -208,7 +214,8 @@ customElements.define("local-business-item", class extends Component {
     static get observedAttributes() {
         return [
             "name",
-            "price"
+            "price",
+            "picture-url"
         ];
     }
     constructor(){
@@ -226,15 +233,20 @@ customElements.define("local-business-item", class extends Component {
                 #price {
                     font-weight: bold;
                 }
+                img {
+                    width: 200px;
+                    max-width: 200px;
+                }
             </style>
             <section id="item">
+                <img alt="" src="" />
                 <h3 id="name"></h3>
                 <price-view id="price"></price-view>
             </section>
         `);
     }
     connectedCallback() {
-        this.name = this.name, this.price = this.price;
+        super.connectedCallback();
     }
     attributeChangedCallback(a, b, c) {
         super.attributeChangedCallback(a, b, c);
@@ -252,6 +264,12 @@ customElements.define("local-business-item", class extends Component {
     set name(a) {
         this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
     }
+    get picture_url() {
+        return this.getAttribute("picture-url");
+    }
+    set picture_url(a) {
+        this.setAttribute("picture-url", a), a && (this.shadowRoot.querySelector("img").src = a);
+    }
 });
 customElements.define("local-business", class extends Component {
     static get observedAttributes() {
@@ -278,7 +296,7 @@ customElements.define("local-business", class extends Component {
         `);
     }
     connectedCallback() {
-        this.name = this.name;
+        super.connectedCallback();
     }
     attributeChangedCallback(a, b, c) {
         super.attributeChangedCallback(a, b, c);
@@ -1445,7 +1463,7 @@ customElements.define("image-input", class extends Component {
                     <canvas width="200" height="200"></canvas>
                 </div>
                 <div>
-                    <input id="save" type="button" value="Zapisz" />
+                    <input id="save" type="button" value="Wyślij" />
                 </div>
             </article>
         `), this.shadowRoot.querySelector("#save").addEventListener("click", (a)=>{
@@ -1528,23 +1546,28 @@ customElements.define("business-item", class extends Component {
         super(`
             <style>
                 :host { display: block; }
-                section { display: flex; justify-content: space-between; }
+                section > form { display: flex; justify-content: space-between; }
-                #form {
+                input[type=submit] {
-                    display: none;
+                    max-width: 25%;
                 }
+                ${FORM_STYLE}
             </style>
             <section>
-                <image-input></image-input>
-                <div id="name"></div>
-                <price-input></price-input>
-            </section>
-            <section id="form">
                 <form action="/business-item/update" method="post">
-                    <input name="id" id="id" />
+                    <image-input></image-input>
+                    <div>
+                        <label>Nazwa</label>
                         <input name="name" id="name" />
-                    <input name="price" id="price" />
+                    </div>
-                    <input name="item_order" id="item_order" />
+                    <div>
-                    <input name="picture_url" id="picture_url" />
+                        <label>Cena</label>
+                        <price-input></price-input>
+                    </div>
+                    <input type="hidden" name="id" id="id" />
+                    <input type="hidden" name="price" id="price" />
+                    <input type="hidden" name="item_order" id="item_order" />
+                    <input type="hidden" name="picture_url" id="picture_url" />
+                    <input type="submit" value="Zapisz" />
                 </form>
             </section>
         `);
@@ -1582,7 +1605,7 @@ customElements.define("business-item", class extends Component {
         return this.getAttribute("name");
     }
     set name(a) {
-        this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
+        this.setAttribute("name", a), this.shadowRoot.querySelector("#name").value = a;
     }
     get price() {
         return this.shadowRoot.querySelector("price-input").value;

client/src/business-items/business-item.js

@@ -1,5 +1,5 @@
 import "../shared/image-input";
-import { Component } from "../shared";
+import { Component, FORM_STYLE } from "../shared";
 
 customElements.define('business-item', class extends Component {
     static get observedAttributes() {
@@ -10,23 +10,28 @@ customElements.define('business-item', class extends Component {
         super(`
             <style>
                 :host { display: block; }
-                section { display: flex; justify-content: space-between; }
+                section > form { display: flex; justify-content: space-between; }
-                #form {
+                input[type=submit] {
-                    display: none;
+                    max-width: 25%;
                 }
+                ${ FORM_STYLE }
             </style>
             <section>
-                <image-input></image-input>
-                <div id="name"></div>
-                <price-input></price-input>
-            </section>
-            <section id="form">
                 <form action="/business-item/update" method="post">
-                    <input name="id" id="id" />
+                    <image-input></image-input>
+                    <div>
+                        <label>Nazwa</label>
                         <input name="name" id="name" />
-                    <input name="price" id="price" />
+                    </div>
-                    <input name="item_order" id="item_order" />
+                    <div>
-                    <input name="picture_url" id="picture_url" />
+                        <label>Cena</label>
+                        <price-input></price-input>
+                    </div>
+                    <input type="hidden" name="id" id="id" />
+                    <input type="hidden" name="price" id="price" />
+                    <input type="hidden" name="item_order" id="item_order" />
+                    <input type="hidden" name="picture_url" id="picture_url" />
+                    <input type="submit" value="Zapisz" />
                 </form>
             </section>
         `);
@@ -61,7 +66,8 @@ customElements.define('business-item', class extends Component {
 
         if (oldV === newV) return;
         switch (name) {
-            case 'price': return this.price = newV / 100.0;
+            case 'price':
+                return this.price = newV / 100.0;
         }
     }
 
@@ -91,7 +97,7 @@ customElements.define('business-item', class extends Component {
 
     set name(v) {
         this.setAttribute('name', v);
-        this.shadowRoot.querySelector('#name').textContent = v;
+        this.shadowRoot.querySelector('#name').value = v;
     }
 
     get price() {

client/src/local-businesses/local-business-item.js

@@ -2,7 +2,7 @@ import { Component } from "../shared";
 
 customElements.define('local-business-item', class extends Component {
     static get observedAttributes() {
-        return ['name', 'price']
+        return ['name', 'price', 'picture-url']
     }
 
     constructor() {
@@ -20,8 +20,13 @@ customElements.define('local-business-item', class extends Component {
                 #price {
                     font-weight: bold;
                 }
+                img {
+                    width: 200px;
+                    max-width: 200px;
+                }
             </style>
             <section id="item">
+                <img alt="" src="" />
                 <h3 id="name"></h3>
                 <price-view id="price"></price-view>
             </section>
@@ -29,8 +34,7 @@ customElements.define('local-business-item', class extends Component {
     }
 
     connectedCallback() {
-        this.name = this.name;
+        super.connectedCallback();
-        this.price = this.price;
     }
 
     attributeChangedCallback(name, oldV, newV) {
@@ -55,4 +59,13 @@ customElements.define('local-business-item', class extends Component {
         this.setAttribute('name', v);
         this.shadowRoot.querySelector('#name').textContent = v;
     }
+
+    get picture_url() {
+        return this.getAttribute('picture-url')
+    }
+
+    set picture_url(v) {
+        this.setAttribute('picture-url', v);
+        if (v) this.shadowRoot.querySelector('img').src = v;
+    }
 });

client/src/local-businesses/local-business.js

@@ -23,7 +23,7 @@ customElements.define('local-business', class extends Component {
     }
 
     connectedCallback() {
-        this.name = this.name;
+        super.connectedCallback();
     }
 
     attributeChangedCallback(name, oldV, newV) {

client/src/shared.js

@@ -119,6 +119,14 @@ export class Component extends HTMLElement {
     }
 
     connectedCallback() {
+        const observed = this.constructor.observedAttributes;
+        if (!Array.isArray(observed))
+            return;
+        for (const name of observed) {
+            const field = this.constructor.attr2Field(name);
+            if (!field) continue;
+            this[field] = this[field];
+        }
     }
 
     attributeChangedCallback(name, oldV, newV) {

client/src/shared/image-input.js

@@ -36,7 +36,7 @@ customElements.define('image-input', class extends Component {
                     <canvas width="200" height="200"></canvas>
                 </div>
                 <div>
-                    <input id="save" type="button" value="Zapisz" />
+                    <input id="save" type="button" value="Wyślij" />
                 </div>
             </article>
         `);

src/model/view.rs

@@ -10,6 +10,7 @@ pub enum Page {
     Register,
     Login,
     BusinessItems,
+    Marketplace,
 }
 
 impl Page {
@@ -44,6 +45,14 @@ impl Page {
             ""
         }
     }
+
+    pub fn select_marketplace(&self) -> &str {
+        if matches!(self, Page::Marketplace) {
+            "selected"
+        } else {
+            ""
+        }
+    }
 }
 
 #[derive(Debug, Default, PartialEq, Serialize, Deserialize)]

src/routes/restricted.rs

@@ -44,13 +44,16 @@ async fn handle_business_items_page(pool: Arc<PgPool>, id: Identity) -> Result<H
     let items: Vec<db::LocalBusinessItem> = sqlx::query_as(
         r#"
 SELECT 
-    id,
+    local_business_items.id,
-    local_business_id,
+    local_business_items.local_business_id,
-    name,
+    local_business_items.name,
-    price,
+    local_business_items.price,
-    item_order,
+    local_business_items.item_order,
-    picture_url
+    local_business_items.picture_url
 FROM local_business_items
+INNER JOIN local_businesses
+    ON local_businesses.id = local_business_items.local_business_id
+WHERE local_businesses.owner_id = $1
 ORDER BY item_order DESC
     "#,
     )