diff --git a/assets/css/app.css b/assets/css/app.css index 07dd217..fe931f2 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -132,6 +132,7 @@ local-businesses local-business p { margin: 8px auto auto; padding: 8px; } + #home { position: relative; } diff --git a/client/src/app.js b/client/src/app.js index f478542..495c421 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -44,7 +44,7 @@ if (!document.querySelector('#facebook-jssdk')) { xfbml: true, version: 'v14.0' }); - // FB.AppEvents.logPageView(); + FB.AppEvents.logPageView(); fireFbReady(); }; diff --git a/client/src/offers/offer-form.js b/client/src/offers/offer-form.js index 0f31cbc..8a31088 100644 --- a/client/src/offers/offer-form.js +++ b/client/src/offers/offer-form.js @@ -1,4 +1,4 @@ -import { Component, FORM_STYLE } from "../shared"; +import { Component, FORM_STYLE, TIP } from "../shared"; customElements.define('offer-form', class extends Component { static get observedAttributes() { @@ -9,11 +9,6 @@ customElements.define('offer-form', class extends Component { super(`
@@ -45,8 +40,11 @@ customElements.define('offer-form', class extends Component {
- +
diff --git a/client/src/ow-account/account-view.js b/client/src/ow-account/account-view.js index 0928663..3f434f7 100644 --- a/client/src/ow-account/account-view.js +++ b/client/src/ow-account/account-view.js @@ -2,7 +2,7 @@ import { Component, FORM_STYLE } from "../shared"; customElements.define('account-view', class extends Component { static get observedAttributes() { - return ['facebook-id', 'id', 'name', 'email'] + return ['facebook-id', 'id', 'name', 'email', 'register-success'] } constructor() { @@ -21,6 +21,10 @@ customElements.define('account-view', class extends Component { display: flex; padding: .375rem .75rem; } + #register-success { display: none; text-align: center; color: darkgreen; } + :host([register-success]) #register-success { + display: block; + } #fb-button { display: none; } @@ -29,6 +33,7 @@ customElements.define('account-view', class extends Component { } ${ FORM_STYLE } +

Konto utworzone!

@@ -61,6 +66,11 @@ customElements.define('account-view', class extends Component { }); } + connectedCallback() { + super.connectedCallback(); + this.register_success = (location.search || '').includes('success'); + } + get name() { return this.getAttribute('name') || ''; } @@ -87,4 +97,15 @@ customElements.define('account-view', class extends Component { this.setAttribute('facebook-id', v); this.shadowRoot.querySelector('#facebook_id').value = v; } + + get register_success() { + return this.getAttribute('register-success') === 'true' + } + + set register_success(v) { + if (v === true || v === 'true') + this.setAttribute('register-success', 'true'); + else + this.removeAttribute('register-success'); + } }); diff --git a/client/src/register-form/register-basic-form.js b/client/src/register-form/register-basic-form.js index 36ebbc2..1fededf 100644 --- a/client/src/register-form/register-basic-form.js +++ b/client/src/register-form/register-basic-form.js @@ -22,6 +22,7 @@ customElements.define('register-basic-form', class extends PseudoForm {
+ `); @@ -30,9 +31,10 @@ customElements.define('register-basic-form', class extends PseudoForm { form.addEventListener('submit', ev => { ev.preventDefault(); ev.stopPropagation(); - this.shadowRoot.querySelector('form-navigation').next(); - }); - this.shadowRoot.querySelector('form-navigation').addEventListener('form:next', ev => { + + console.log(ev); + if (form.reportValidity()) + this.shadowRoot.querySelector('form-navigation').next(); }); } }); diff --git a/client/src/register-form/register-business-form.js b/client/src/register-form/register-business-form.js index 43c73e6..1f83abb 100644 --- a/client/src/register-form/register-business-form.js +++ b/client/src/register-form/register-business-form.js @@ -1,4 +1,4 @@ -import { FORM_STYLE, PseudoForm } from "../shared"; +import { FORM_STYLE, TIP, PseudoForm } from "../shared"; customElements.define('register-business-form', class extends PseudoForm { constructor() { @@ -6,15 +6,18 @@ customElements.define('register-business-form', class extends PseudoForm {
+
- + +
Produkty dodawane są w nastepnym kroku
@@ -26,4 +29,8 @@ customElements.define('register-business-form', class extends PseudoForm { this.shadowRoot.querySelector('form-navigation').next(); }); } + + connectedCallback() { + super.connectedCallback(); + } }) diff --git a/client/src/register-form/register-items-form.js b/client/src/register-form/register-items-form.js index 0d31814..e94d960 100644 --- a/client/src/register-form/register-items-form.js +++ b/client/src/register-form/register-items-form.js @@ -30,6 +30,7 @@ customElements.define('register-items-form', class extends PseudoForm {
+ `); @@ -39,6 +40,7 @@ customElements.define('register-items-form', class extends PseudoForm { updateItems(this) }); this.addEventListener('form:next', ev => { + updateItems(this); for (const el of this.querySelectorAll('item-form-row')) { if (!el.reportValidity()) { ev.stopPropagation(); @@ -55,7 +57,7 @@ customElements.define('register-items-form', class extends PseudoForm { ev.stopPropagation(); ev.preventDefault(); this.appendChild(document.createElement('register-item-form-row')); - updateItems(this) + updateItems(this); }); } diff --git a/client/src/register-form/register-submit-form.js b/client/src/register-form/register-submit-form.js index ac7bbd0..e1e664e 100644 --- a/client/src/register-form/register-submit-form.js +++ b/client/src/register-form/register-submit-form.js @@ -7,6 +7,7 @@ customElements.define('register-submit-form', class extends PseudoForm { :host { display: block; } * { font-family: 'Noto Sans', sans-serif; } ${ FORM_STYLE } + img[src=''] { display: none; } @media only screen and (min-device-width: 1200px) { .item-view { display: flex; @@ -72,7 +73,10 @@ customElements.define('register-submit-form', class extends PseudoForm { const [name, price, img] = row; el.innerHTML = ` - + ${ img.value !== '' + ? `` + : `Brak zdjęcia` + } diff --git a/client/src/register-form/register-user-type.js b/client/src/register-form/register-user-type.js index 84839b6..6ccfcb6 100644 --- a/client/src/register-form/register-user-type.js +++ b/client/src/register-form/register-user-type.js @@ -1,4 +1,4 @@ -import { Component, BUTTON_STYLE } from "../shared"; +import { Component, BUTTON_STYLE, TIP } from "../shared"; customElements.define('register-user-type', class extends Component { constructor() { @@ -52,7 +52,7 @@ customElements.define('register-user-type', class extends Component { height: 200px; } } - ${ BUTTON_STYLE } + ${ BUTTON_STYLE }${ TIP }
+ Kliknij żeby przesłać zdjęcie (opcjonalne)
-
+
@@ -56,10 +63,13 @@ customElements.define('image-input', class extends Component { const input = this.shadowRoot.querySelector('#file'); const view = this.shadowRoot.querySelector('#view'); - const toFile = (canvas) => - canvas.toBlob((blob) => { - this.#file = new File([blob], `${ crypto.randomUUID() }.webp`, { type: blob.type }); - }, 'image/webp'); + const toFile = (canvas) => new Promise((resolve) => { + canvas.toBlob(async (blob) => { + this.#file = new File([blob], `${ crypto.randomUUID() }.webp`, { type: blob.type }); + resolve(); + await this.#sendFile(this.#file); // TODO: Send on form submit + }, 'image/webp'); + }) input.addEventListener('change', ev => { ev.stopPropagation(); @@ -69,7 +79,7 @@ customElements.define('image-input', class extends Component { let maxWidth = this.width; let maxHeight = this.height; - image.onload = () => { + image.onload = async () => { if (this.send_original) { maxWidth = maxWidth < image.naturalWidth ? maxWidth : image.naturalWidth; maxHeight = maxHeight < image.naturalHeight ? maxHeight : image.naturalHeight; @@ -84,19 +94,17 @@ customElements.define('image-input', class extends Component { canvas.width = image.width = width; canvas.height = image.height = height; - if (this.send_original) { - canvas.getContext('2d').drawImage(image, 0, 0, width, height); - } else { - canvas.getContext('2d').drawImage(image, 0, 0); - } - toFile(canvas); + canvas.getContext('2d').drawImage(image, 0, 0, width, height); + + await toFile(canvas); + image.width = width > image ? 200 : (width * 200) / height; image.height = width > image ? (width * 200) / height : 200; + view.appendChild(image); }; image.src = URL.createObjectURL(input.files[0]); view.innerHTML = ''; - view.appendChild(image); }); view.addEventListener('click', ev => { @@ -149,7 +157,11 @@ customElements.define('image-input', class extends Component { if (!(v || '').startsWith("/")) v = ''; this.setAttribute('url', v); const view = this.shadowRoot.querySelector('#view'); - view.innerHTML = ``; + if (v === '') { + view.innerHTML = 'Kliknij żeby przesłać zdjęcie (opcjonalne)'; + } else { + view.innerHTML = ``; + } } get value() { diff --git a/server/assets/templates/businesses/index.html b/server/assets/templates/businesses/index.html index 912edaa..e0dcfa5 100644 --- a/server/assets/templates/businesses/index.html +++ b/server/assets/templates/businesses/index.html @@ -1,5 +1,6 @@ {% extends "../base.html" %} {% block content %} +

Lokalne usługi

{% for business in businesses %} -

Rzeczy wystawione na sprzedaż

+

Rzeczy wystawione na sprzedaż

{% for offer in offers %}
Moje usługi
+ {%- endif %} + {% if account.is_some() -%} -

Sprzedaż niepotrzebnych rzeczy

+

Sprzedaż niepotrzebnych rzeczy

{% for offer in offers %} diff --git a/server/src/routes/unrestricted/account.rs b/server/src/routes/unrestricted/account.rs index 6f20c9a..48ad776 100644 --- a/server/src/routes/unrestricted/account.rs +++ b/server/src/routes/unrestricted/account.rs @@ -204,7 +204,7 @@ RETURNING id, local_business_id, name, price, item_order, picture_url t.commit().await.unwrap(); Ok(HttpResponse::SeeOther() - .append_header(("Location", "/")) + .append_header(("Location", "/account?success")) .body( AccountTemplate { account: Some(account), diff --git a/web/src/lib.rs b/web/src/lib.rs index ac1279b..8b13789 100644 --- a/web/src/lib.rs +++ b/web/src/lib.rs @@ -1,64 +1 @@ -use stdweb::web::HtmlElement; -use stdweb::*; -#[global_allocator] -static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; - -pub trait Component { - fn tag_name() -> String; - - fn create(el: HtmlElement) -> Self; - - fn created(&mut self) {} - - fn connected_callback(&self) {} - - fn disconnected_callback(&mut self) {} - - fn attribute_changed( - &mut self, - _name: String, - _old_value: Option, - _new_value: Option, - ) { - } -} - -pub struct FooElement { - el: HtmlElement, -} - -impl Component for FooElement { - fn tag_name() -> String { - "foo-element".into() - } - - fn create(el: HtmlElement) -> Self { - Self { el } - } - - fn connected_callback(&self) {} -} - -pub struct BarElement { - el: HtmlElement, -} - -impl Component for BarElement { - fn tag_name() -> String { - "bar-element".into() - } - - fn create(el: HtmlElement) -> Self { - Self { el } - } - - fn connected_callback(&self) {} -} - -pub fn define() { - let tag_name = BarElement::tag_name(); - js! { - customerElemenets.define(@{tag_name}, class extends HTMLElement {}); - } -}