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

Detect contact type

Browse Source
This commit is contained in:
eraden 2022-07-17 13:20:16 +02:00
parent eb945f5176
commit fd50556ba8
10 changed files with 99 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/templates/businesses/index.html
View File

@ -21,9 +21,10 @@
>
</local-business-item>
{% endfor %}
<contact-info-list>
<contact-info-list slot="contacts">
{% for contact in business.contacts %}
<contact-info
mode="icon"
contact-id="{{contact.id}}"
contact-type="{{contact.contact_type}}"
content="{{contact.content}}"

5
client/src/app.js
View File

@ -1,8 +1,11 @@
import "./shared/form-navigation.js";
import "./local-businesses.js";
import "./login-form.js";
import "./ow-account.js";
import "./local-businesses/local-businesses.js";
import "./local-businesses/local-business-item";
import "./local-businesses/local-business";
import "./nav/ow-nav.js";
import "./nav/ow-path.js";

54
client/src/contacts/contact-info-editor.js
View File

@ -19,6 +19,10 @@ customElements.define('contact-info-editor', class extends Component {
display: flex;
justify-content: start;
}
#icon {
align-self: flex-end;
position: relative;
}
${ FORM_STYLE }
</style>
<section>
@ -34,9 +38,11 @@ customElements.define('contact-info-editor', class extends Component {
<div id="contact-wrapper">
<label>E-Mail</label>
<div id="input">
<div id="icon">
<contact-type-icon contact-type="email"></contact-type-icon>
</div>
<input type="email" id="content" name="content" />
<input type="text" id="content" name="content" />
</div>
</div>
<div>
@ -49,9 +55,28 @@ customElements.define('contact-info-editor', class extends Component {
</section>
`);
{
let timeout;
const input = this.shadowRoot.querySelector('#content');
input.addEventListener('change', ev => {
ev.stopPropagation();
console.log('change', input.value)
this.#updateContactType(input.value, null);
});
input.addEventListener('keyup', ev => {
ev.stopPropagation();
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
console.log('keyup', input.value)
this.#updateContactType(input.value, null);
}, 1000 / 3)
});
}
this.shadowRoot.querySelector('#contact_type').addEventListener('change', ev => {
ev.stopPropagation();
this.type = ev.target.value;
this.#updateContactType(null, ev.target.value);
});
}
@ -60,11 +85,7 @@ customElements.define('contact-info-editor', class extends Component {
}
set type(v) {
this.setAttribute('type', v);
const icon = this.shadowRoot.querySelector('contact-type-icon');
icon.setAttribute('contact-type', v);
this.shadowRoot.querySelector('#contact_type').value = v;
this.shadowRoot.querySelector('#content').setAttribute('type', v === 'email' ? 'email' : 'text');
this.#updateContactType(null, v);
}
get content() {
@ -108,4 +129,23 @@ customElements.define('contact-info-editor', class extends Component {
form.action = '/contacts/update';
form.querySelector('input[type=submit]').value = 'Zmień';
}
#updateContactType(value, type) {
type = type || this.#resolveContactType(value);
this.setAttribute('type', type);
const icon = this.shadowRoot.querySelector('contact-type-icon');
icon.setAttribute('contact-type', type);
this.shadowRoot.querySelector('#contact_type').value = type;
}
#resolveContactType(s) {
s = s || '';
if (s.match(/http(s)?:\/\/(www\.)?facebook\.com/)) {
return 'facebook';
}
if (s.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
return 'email';
}
return 'other';
}
});

37
client/src/contacts/contact-info.js
View File

@ -3,14 +3,14 @@ import { Component } from "../shared";
customElements.define('contact-info',
class extends Component {
static get observedAttributes() {
return ['contact-type', 'content', 'contact-id'];
return ['contact-type', 'content', 'contact-id', 'mode'];
}
constructor() {
super(`
<style>
:host { display: block; }
section {
section a {
display: flex;
justify-content: start;
}
@ -18,11 +18,16 @@ customElements.define('contact-info',
width: 24px;
margin-right: 8px;
}
:host([mode="icon"]) #content {
display: none;
}
</style>
<slot></slot>
<section>
<a target="_blank">
<contact-type-icon contact-type="email"></contact-type-icon>
<div id="content"></div>
</a>
</section>
`);
}
@ -31,6 +36,8 @@ customElements.define('contact-info',
if (!v) return;
this.setAttribute('contact-type', v);
this.shadowRoot.querySelector('contact-type-icon').setAttribute('contact-type', v);
this.#setHref();
}
get contact_type() {
@ -40,6 +47,8 @@ customElements.define('contact-info',
set content(v) {
this.setAttribute('content', v);
this.shadowRoot.querySelector('#content').textContent = v;
this.#setHref();
}
get content() {
@ -53,4 +62,28 @@ customElements.define('contact-info',
set contact_id(v) {
this.setAttribute('contact-id', v);
}
get mode() {
return this.getAttribute('mode');
}
// full or icon
set mode(v) {
this.setAttribute('mode', (v || '').toLocaleLowerCase())
}
#setHref() {
this.shadowRoot.querySelector('a').href = this.#createLinkPath();
}
#createLinkPath() {
const s = this.shadowRoot.querySelector('#content').textContent || '';
switch (this.contact_type) {
case 'facebook':
case 'other':
return s;
case 'email':
return `mailto:${s}`;
}
}
});

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

@ -1,4 +1,4 @@
import { Component, S } from "../shared";
import { Component } from "../shared";
customElements.define('local-business', class extends Component {
static get observedAttributes() {
@ -22,6 +22,9 @@ customElements.define('local-business', class extends Component {
<section id="items">
<slot name="item"></slot>
</section>
<section>
<slot name="contacts"></slot>
</section>
`);
}

4
client/src/local-businesses.js → client/src/local-businesses/local-businesses.js
View File

@ -1,6 +1,4 @@
import "./local-businesses/local-business-item";
import "./local-businesses/local-business";
import { Component } from "./shared";
import { Component } from "../shared";
customElements.define('local-business-list', class extends Component {
static get observedAttributes() {

2
client/src/register-form.js
View File

@ -1,4 +1,4 @@
import { S, FORM_STYLE, Component } from "./shared";
import { FORM_STYLE, Component } from "./shared";
import "./register-form/register-basic-form";
import "./register-form/register-item-form-row.js";

2
client/src/shared.js
View File

@ -1,5 +1,3 @@
export const S = Symbol();
export const BUTTON_STYLE = `
input[type="button"], input[type="submit"], button {
cursor: pointer;

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

@ -1,4 +1,4 @@
import { BUTTON_STYLE, Component, S } from "../shared.js";
import { BUTTON_STYLE, Component } from "../shared.js";
customElements.define('image-input', class extends Component {
static get observedAttributes() {

2
src/queries/mod.rs
View File

@ -856,7 +856,7 @@ UPDATE contacts
SET
contact_type = $3,
content = $4
WHERE id = $1 WHERE owner_id = $2
WHERE id = $1 AND owner_id = $2
RETURNING
id,
owner_id,