Tsumanu/oswilno
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show business item image

Browse Source
This commit is contained in:
eraden 2022-07-11 07:58:13 +02:00
parent d7f3f1c7f9
commit 563917d924
10 changed files with 115 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/templates/base.html
View File

@ -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() %}

7
assets/templates/index.html
View File

@ -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 %}

61
client/dist/app.js vendored
View File

@ -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; }
#form {
display: none;
section > form { display: flex; justify-content: space-between; }
input[type=submit] {
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" />
<input name="name" id="name" />
<input name="price" id="price" />
<input name="item_order" id="item_order" />
<input name="picture_url" id="picture_url" />
<image-input></image-input>
<div>
<label>Nazwa</label>
<input name="name" id="name" />
</div>
<div>
<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;

38
client/src/business-items/business-item.js
View File

@ -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; }
#form {
display: none;
section > form { display: flex; justify-content: space-between; }
input[type=submit] {
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" />
<input name="name" id="name" />
<input name="price" id="price" />
<input name="item_order" id="item_order" />
<input name="picture_url" id="picture_url" />
<image-input></image-input>
<div>
<label>Nazwa</label>
<input name="name" id="name" />
</div>
<div>
<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() {

19
client/src/local-businesses/local-business-item.js
View File

@ -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;
this.price = this.price;
super.connectedCallback();
}
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;
}
});

2
client/src/local-businesses/local-business.js
View File

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

8
client/src/shared.js
View File

@ -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) {

2
client/src/shared/image-input.js
View File

@ -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>
`);

9
src/model/view.rs
View File

@ -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)]

15
src/routes/restricted.rs
View File

@ -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_id,
name,
price,
item_order,
picture_url
local_business_items.id,
local_business_items.local_business_id,
local_business_items.name,
local_business_items.price,
local_business_items.item_order,
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
"#,
)