From bbf774d8d9dc5cc9fec873c6cf4cb4a055a9ddef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Wo=C5=BAniak?= Date: Fri, 5 Aug 2022 14:25:50 +0200 Subject: [PATCH] Add link as contact, ui fixes --- client/src/contacts/contact-info-editor.js | 3 + client/src/contacts/contact-type-icon.js | 6 +- .../local-businesses/local-business-item.js | 36 +++++++--- .../src/local-businesses/local-businesses.js | 6 +- client/src/marketplace/marketplace-offer.js | 44 +++++++----- client/src/marketplace/marketplace-offers.js | 16 ++++- client/src/marketplace/user-edit-offer.js | 5 ++ client/src/shared/search-input.js | 19 ++++- server/assets/templates/businesses/index.html | 2 +- server/assets/templates/businesses/show.html | 2 +- .../assets/templates/marketplace/index.html | 72 ++++++++++--------- server/assets/templates/marketplace/show.html | 31 ++++++++ server/src/queries/contacts.rs | 1 + server/src/queries/offers.rs | 34 +++++++-- server/src/routes/mod.rs | 6 ++ server/src/routes/unrestricted.rs | 10 ++- server/src/routes/unrestricted/marketplace.rs | 12 ++-- 17 files changed, 221 insertions(+), 84 deletions(-) create mode 100644 server/assets/templates/marketplace/show.html diff --git a/client/src/contacts/contact-info-editor.js b/client/src/contacts/contact-info-editor.js index e34d7a8..665e794 100644 --- a/client/src/contacts/contact-info-editor.js +++ b/client/src/contacts/contact-info-editor.js @@ -160,6 +160,9 @@ customElements.define('contact-info-editor', class extends Component { if (s.match(/^[a-zA-Z\d.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z\d-]+(?:\.[a-zA-Z\d-]+)*$/)) { return 'email'; } + if (s.match(/https?:\/\//)) { + return 'link'; + } return 'other'; } }); diff --git a/client/src/contacts/contact-type-icon.js b/client/src/contacts/contact-type-icon.js index d0f2eb5..20d287b 100644 --- a/client/src/contacts/contact-type-icon.js +++ b/client/src/contacts/contact-type-icon.js @@ -23,7 +23,8 @@ customElements.define('contact-type-icon', :host([type="mobile"]) #mobile-icon { display: block; } - path { + :host([type='link']) #link-icon { + display: block; } @@ -45,6 +46,9 @@ customElements.define('contact-type-icon', + + + `); } diff --git a/client/src/local-businesses/local-business-item.js b/client/src/local-businesses/local-business-item.js index ec26ae1..a897833 100644 --- a/client/src/local-businesses/local-business-item.js +++ b/client/src/local-businesses/local-business-item.js @@ -8,8 +8,15 @@ customElements.define('local-business-item', class extends Component { constructor() { super(`
-
+
diff --git a/client/src/marketplace/marketplace-offer.js b/client/src/marketplace/marketplace-offer.js index 001078a..f39b112 100644 --- a/client/src/marketplace/marketplace-offer.js +++ b/client/src/marketplace/marketplace-offer.js @@ -20,6 +20,9 @@ customElements.define('marketplace-offer', class extends Component { section { margin-bottom: 16px; + text-decoration: none; + color: black; + font-style: normal; } #preview { @@ -37,8 +40,7 @@ customElements.define('marketplace-offer', class extends Component { } :host([price-range-max="0"]) #sep, :host([price-range]) #sep, - :host([price-range-max="0"]) #price-min, :host([price-range]) #price-min - { + :host([price-range-max="0"]) #price-min, :host([price-range]) #price-min { display: none; } @@ -87,7 +89,7 @@ customElements.define('marketplace-offer', class extends Component { justify-content: end; } - @media only screen and (min-device-width: 1200px) { + @media only screen and (min-device-width: 1000px) { #details { display: grid; column-gap: 16px; @@ -125,24 +127,32 @@ customElements.define('marketplace-offer', class extends Component { width: 100px; text-align: right; } + + a { + font-style: normal; + text-decoration: none; + color: black; + } } ${ INPUT_STYLE } -
-
- - -
-

- - - - -
-
- Kontakt: - -
+
+
+
+ + +
+

+ + - + +
+
+ Kontakt: + +
+
`); this.#price_range = new PriceRange(0, 0); } diff --git a/client/src/marketplace/marketplace-offers.js b/client/src/marketplace/marketplace-offers.js index 52a5c95..6adb1b3 100644 --- a/client/src/marketplace/marketplace-offers.js +++ b/client/src/marketplace/marketplace-offers.js @@ -26,12 +26,19 @@ customElements.define('marketplace-offers', class extends Component { :host([account-id]) #publishSection { display: block; } - ::slotted(marketplace-offer), ::slotted(user-edit-offer) { + ::slotted(a), ::slotted(marketplace-offer), ::slotted(user-edit-offer) { margin-bottom: 20px; + text-decoration: none; + color: black; + font-style: normal; } ::slotted([search-visible='invisible']) { display: none; } + #search { + margin-bottom: 16px; + margin-top: 16px; + } @media only screen and (min-device-width: 1000px) { #offers { display: flex; @@ -39,9 +46,12 @@ customElements.define('marketplace-offers', class extends Component { flex-wrap: wrap; justify-items: stretch; } - ::slotted(marketplace-offer), ::slotted(user-edit-offer) { + ::slotted(a), ::slotted(marketplace-offer), ::slotted(user-edit-offer) { width: calc(33% - 40px); margin: 0 20px 20px; + text-decoration: none; + color: black; + font-style: normal; } } ${ BUTTON_STYLE } @@ -51,7 +61,7 @@ customElements.define('marketplace-offers', class extends Component {
-
+
diff --git a/client/src/marketplace/user-edit-offer.js b/client/src/marketplace/user-edit-offer.js index ac0f651..729308d 100644 --- a/client/src/marketplace/user-edit-offer.js +++ b/client/src/marketplace/user-edit-offer.js @@ -15,6 +15,11 @@ customElements.define('user-edit-offer', class extends Component { :host([mode='view']) #view { display: block; } :host([mode='form']) #form { display: block; } :host([state='Finished']) #finishForm { display: none; } + section, a, ::slotted(a) { + text-decoration: none; + color: black; + font-style: normal; + } #actions { display: flex; justify-content: space-between; diff --git a/client/src/shared/search-input.js b/client/src/shared/search-input.js index bafb17c..4e34cb7 100644 --- a/client/src/shared/search-input.js +++ b/client/src/shared/search-input.js @@ -25,8 +25,25 @@ customElements.define('search-input', class extends Component { border-bottom: 1px solid #ccc; text-indent: 20px; } + svg { height: 24px; } + section { + display: flex; + justify-content: start; + align-content: center; + align-items: center; + }
+ + +
`); @@ -52,10 +69,8 @@ customElements.define('search-input', class extends Component { super.connectedCallback(); let node = this; while (node) { - console.warn(node) if (node == null) return console.warn('no parent node', node); if (node instanceof ShadowRoot) { - console.warn('node is shadow') this.#host = node.host; break; } diff --git a/server/assets/templates/businesses/index.html b/server/assets/templates/businesses/index.html index c404455..f12fade 100644 --- a/server/assets/templates/businesses/index.html +++ b/server/assets/templates/businesses/index.html @@ -26,7 +26,7 @@ mode="icon" contact-id="{{contact.id}}" content="{{h.render_contact(contact.contact_type.as_str(), contact.content.as_str())}}" - contact-type="{{contact.contact_type}}" + type="{{contact.contact_type}}" > {% endfor %} diff --git a/server/assets/templates/businesses/show.html b/server/assets/templates/businesses/show.html index 2a0ad97..5b557c6 100644 --- a/server/assets/templates/businesses/show.html +++ b/server/assets/templates/businesses/show.html @@ -25,7 +25,7 @@ mode="icon" contact-id="{{contact.id}}" content="{{h.render_contact(contact.contact_type.as_str(), contact.content.as_str())}}" - contact-type="{{contact.contact_type}}" + type="{{contact.contact_type}}" > {% endfor %} diff --git a/server/assets/templates/marketplace/index.html b/server/assets/templates/marketplace/index.html index e461495..9fac0ef 100644 --- a/server/assets/templates/marketplace/index.html +++ b/server/assets/templates/marketplace/index.html @@ -22,17 +22,50 @@ price-range-max="{{max}}" {% endmatch %} > + + + + {% for contact in offer.contacts %} + + {% endfor %} + + + + + {% endfor %} + + {% for offer in offers %} + - - {% endfor %} - - {% for offer in offers %} - - - {% for contact in offer.contacts %} - - {% endfor %} - - + {% endfor %} {% endblock %} diff --git a/server/assets/templates/marketplace/show.html b/server/assets/templates/marketplace/show.html new file mode 100644 index 0000000..9439441 --- /dev/null +++ b/server/assets/templates/marketplace/show.html @@ -0,0 +1,31 @@ +{% extends "../base.html" %} +{% block content %} + + + {% for contact in offer.contacts %} + + {% endfor %} + + +{% endblock %} diff --git a/server/src/queries/contacts.rs b/server/src/queries/contacts.rs index fb3bb62..b903d0f 100644 --- a/server/src/queries/contacts.rs +++ b/server/src/queries/contacts.rs @@ -14,6 +14,7 @@ SELECT content FROM contacts +ORDER BY contact_type, id ASC "#, ) .fetch_all(t) diff --git a/server/src/queries/offers.rs b/server/src/queries/offers.rs index cdb1843..960ca00 100644 --- a/server/src/queries/offers.rs +++ b/server/src/queries/offers.rs @@ -57,9 +57,14 @@ ORDER BY id DESC } #[tracing::instrument] -pub async fn offer_by_id(t: &mut T<'_>, account_id: i32, offer_id: i32) -> Result { - sqlx::query_as( - r#" +pub async fn offer_by_id( + t: &mut T<'_>, + account_id: Option, + offer_id: i32, +) -> Result { + match account_id { + Some(account_id) => sqlx::query_as( + r#" SELECT id, owner_id, @@ -72,9 +77,26 @@ FROM offers WHERE owner_id = $1 AND id = $2 LIMIT 1 "#, - ) - .bind(account_id) - .bind(offer_id) + ) + .bind(account_id) + .bind(offer_id), + None => sqlx::query_as( + r#" +SELECT + id, + owner_id, + price_range, + description, + picture_url, + state, + created_at +FROM offers +WHERE id = $1 +LIMIT 1 + "#, + ) + .bind(offer_id), + } .fetch_one(t) .await .map_err(|e| { diff --git a/server/src/routes/mod.rs b/server/src/routes/mod.rs index 05a9c39..e4e18f0 100644 --- a/server/src/routes/mod.rs +++ b/server/src/routes/mod.rs @@ -314,9 +314,15 @@ impl Responder for HttpResult { let status_code = self.status_code(); match self { HttpResult::Json { body, code } => HttpResponse::build(code) + .append_header(("Sec-GPC-field-name", "Sec-GPC")) + .append_header(("Sec-GPC-field-value", "1")) + .append_header(("Sec-GPC", "1")) .content_type("application/json") .body(body), HttpResult::Html { body, code } => HttpResponse::build(code) + .append_header(("Sec-GPC-field-name", "Sec-GPC")) + .append_header(("Sec-GPC-field-value", "1")) + .append_header(("Sec-GPC", "1")) .content_type("text/html") .body(body), HttpResult::Err { diff --git a/server/src/routes/unrestricted.rs b/server/src/routes/unrestricted.rs index 6e4026f..cf4a2cd 100644 --- a/server/src/routes/unrestricted.rs +++ b/server/src/routes/unrestricted.rs @@ -37,6 +37,13 @@ pub async fn render_index() -> HttpResponse { ) } +#[get("/.well-known/gpc.json")] +async fn gpc() -> HttpResponse { + HttpResponse::Ok() + .content_type("application/json") + .body("{\"gpc\":true,\"lastUpdate\":\"1997-03-10\"}") +} + #[get("/")] async fn index(req: HttpRequest) -> HttpResult { HttpResult::goto(&req, "/marketplace") @@ -62,5 +69,6 @@ pub fn configure(config: &mut ServiceConfig) { .prefer_utf8(true) .show_files_listing(), ) - .service(index); + .service(index) + .service(gpc); } diff --git a/server/src/routes/unrestricted/marketplace.rs b/server/src/routes/unrestricted/marketplace.rs index 8c0429e..60af957 100644 --- a/server/src/routes/unrestricted/marketplace.rs +++ b/server/src/routes/unrestricted/marketplace.rs @@ -114,7 +114,7 @@ async fn edit_marketplace( } }; - let offer = match queries::offer_by_id(&mut t, account.id, offer_id).await { + let offer = match queries::offer_by_id(&mut t, Some(account.id), offer_id).await { Ok(offer) => offer, Err(e) => { dbg!(e); @@ -146,7 +146,7 @@ async fn edit_marketplace( } #[derive(Default, Serialize, Template)] -#[template(path = "./marketplace/edit.html")] +#[template(path = "./marketplace/show.html")] struct ShowOfferTemplate { account: Option, error: Option, @@ -176,7 +176,7 @@ async fn show_marketplace( return HttpResult::res( &req, StatusCode::NOT_FOUND, - EditOfferTemplate { + ShowOfferTemplate { page: Page::Marketplace, account, error: Some("Oferta nie istnieje".into()), @@ -186,14 +186,14 @@ async fn show_marketplace( } }; - let offer = match queries::offer_by_id(&mut t, account.id, offer_id).await { + let offer = match queries::offer_by_id(&mut t, None, offer_id).await { Ok(offer) => offer, Err(e) => { dbg!(e); return HttpResult::res( &req, StatusCode::NOT_FOUND, - EditOfferTemplate { + ShowOfferTemplate { page: Page::Marketplace, account: Some(account), error: Some("Oferta nie istnieje".into()), @@ -208,7 +208,7 @@ async fn show_marketplace( HttpResult::res( &req, StatusCode::OK, - EditOfferTemplate { + ShowOfferTemplate { page: Page::Marketplace, account: Some(account), offer: view::Offer::from((offer, &vec![])),