1622 lines
59 KiB
JavaScript
1622 lines
59 KiB
JavaScript
Symbol();
|
|
const BUTTON_STYLE = `
|
|
input[type="button"], input[type="submit"] {
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-width: 1px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
box-shadow: 0 10px 20px -6px rgba(0,0,0,.12);
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
transition: .3s;
|
|
|
|
background: #46b5d1;
|
|
color: #fff;
|
|
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
padding: .375rem .75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
transition: color .15s ease-in-out,
|
|
background-color .15s ease-in-out,
|
|
border-color .15s ease-in-out,
|
|
box-shadow .15s ease-in-out,
|
|
width: auto;
|
|
height: calc(1.5em + 0.75rem + 2px);
|
|
padding: .375rem .75rem;
|
|
|
|
border: 1px solid #495057;
|
|
color: #495057;
|
|
background: white;
|
|
}
|
|
`;
|
|
const FORM_STYLE = `
|
|
form {
|
|
display: block;
|
|
}
|
|
form legend {
|
|
margin: 16px 0;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
form.inline div {
|
|
display: flex;
|
|
}
|
|
form > div {
|
|
display: block;
|
|
margin-bottom: 1rem;
|
|
}
|
|
input, textarea {
|
|
font-size: 16px;
|
|
|
|
border: none;
|
|
border-bottom-style: none;
|
|
border-bottom-width: medium;
|
|
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
border-radius: 2px;
|
|
padding: 0;
|
|
|
|
height: 36px;
|
|
background: #fff;
|
|
color: rgba(0,0,0,.8);
|
|
font-size: 14px;
|
|
|
|
box-shadow: none !important;
|
|
|
|
display: block;
|
|
width: 100%;
|
|
height: calc(1.5em + 0.75rem + 2px);
|
|
padding: .375rem .75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: #495057;
|
|
background-clip: padding-box;
|
|
transition: border-color .15s ease-in-out , -webkit-box-shadow .15s ease-in-out;
|
|
transition: border-color .15s ease-in-out , box-shadow .15s ease-in-out;
|
|
transition: border-color .15s ease-in-out , box-shadow .15s ease-in-out , -webkit-box-shadow .15s ease-in-out;
|
|
}
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
textarea {
|
|
width: calc(100% - 1.5rem - 2px);
|
|
}
|
|
label {
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
|
|
display: inline-block;
|
|
margin-bottom: .5rem;
|
|
}
|
|
${BUTTON_STYLE}
|
|
`;
|
|
class Component extends HTMLElement {
|
|
#a;
|
|
static get observedAttributes() {
|
|
return [];
|
|
}
|
|
constructor(a){
|
|
super(), this.#a = this.attachShadow({
|
|
mode: "open"
|
|
}), this.#a.innerHTML = a;
|
|
}
|
|
connectedCallback() {}
|
|
attributeChangedCallback(a, b, c) {
|
|
if (b === c) return;
|
|
let d = this.constructor.observedAttributes;
|
|
if (!Array.isArray(d) || !d.includes(a)) return;
|
|
let e = this.constructor.attr2Field(a);
|
|
e && (this[e] = c);
|
|
}
|
|
static attr2Field(a) {
|
|
if (!(this.constructor.attr2FieldBlacklist || []).includes(a)) return a.replace("-", "_");
|
|
}
|
|
static get attr2FieldBlacklist() {
|
|
return [];
|
|
}
|
|
}
|
|
class PseudoForm extends Component {
|
|
reportValidity() {
|
|
return this.shadowRoot.querySelector("form").reportValidity();
|
|
}
|
|
checkValidity() {
|
|
return this.shadowRoot.querySelector("form").checkValidity();
|
|
}
|
|
get elements() {
|
|
return this.shadowRoot.querySelector("form").elements;
|
|
}
|
|
}
|
|
const fireFbReady = ()=>{
|
|
for (let c of (b = !0, a))c();
|
|
};
|
|
const runFbReady = (c)=>{
|
|
b ? c() : a.push(c);
|
|
};
|
|
let a = [], b = !1;
|
|
customElements.define("form-navigation", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"next",
|
|
"prev"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
${FORM_STYLE}
|
|
.actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
input {
|
|
max-width: 200px;
|
|
}
|
|
input.hidden {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
<form>
|
|
<div class="actions">
|
|
<input id="prev" type="button" value="Wróć" />
|
|
<input id="next" type="submit" value="Następny" />
|
|
</div>
|
|
</form>
|
|
`), this.shadowRoot.querySelector("#prev").addEventListener("click", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.prev();
|
|
}), this.shadowRoot.querySelector("#next").addEventListener("click", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.next();
|
|
});
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
if (b !== c) switch(a){
|
|
case "next":
|
|
this.shadowRoot.querySelector("#next").className = "hidden" === c ? "hidden" : "";
|
|
break;
|
|
case "prev":
|
|
this.shadowRoot.querySelector("#prev").className = "hidden" === c ? "hidden" : "";
|
|
}
|
|
}
|
|
next() {
|
|
this.dispatchEvent(new CustomEvent("form:next", {
|
|
bubbles: !0,
|
|
composed: !0,
|
|
detail: this.parentElement
|
|
}));
|
|
}
|
|
prev() {
|
|
this.dispatchEvent(new CustomEvent("form:prev", {
|
|
bubbles: !0,
|
|
composed: !0,
|
|
detail: this.parentElement
|
|
}));
|
|
}
|
|
});
|
|
customElements.define("local-business-item", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"name",
|
|
"price"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
#item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
h3 {
|
|
font-weight: normal;
|
|
}
|
|
#price {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<section id="item">
|
|
<h3 id="name"></h3>
|
|
<price-view id="price"></price-view>
|
|
</section>
|
|
`);
|
|
}
|
|
connectedCallback() {
|
|
this.name = this.name, this.price = this.price;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get price() {
|
|
let a = parseInt(this.getAttribute("price"));
|
|
return isNaN(a) ? 0 : a;
|
|
}
|
|
set price(a) {
|
|
this.setAttribute("price", a), this.shadowRoot.querySelector("#price").value = a;
|
|
}
|
|
get name() {
|
|
return this.getAttribute("name");
|
|
}
|
|
set name(a) {
|
|
this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
|
|
}
|
|
});
|
|
customElements.define("local-business", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"name",
|
|
"service-id",
|
|
"state"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
#items {
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|
|
<h2 id="name"></h2>
|
|
<slot name="description"></slot>
|
|
<section id="items">
|
|
<slot name="item"></slot>
|
|
</section>
|
|
`);
|
|
}
|
|
connectedCallback() {
|
|
this.name = this.name;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get name() {
|
|
return this.getAttribute("name") || "";
|
|
}
|
|
set name(a) {
|
|
this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
|
|
}
|
|
get state() {
|
|
return this.getAttribute("state");
|
|
}
|
|
set state(a) {
|
|
this.setAttribute("state", a);
|
|
}
|
|
get service_id() {
|
|
return this.getAttribute("service-id");
|
|
}
|
|
set service_id(a) {
|
|
this.setAttribute("service-id", a);
|
|
}
|
|
});
|
|
customElements.define("local-businesses", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"filter"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
::slotted(local-service[local-business-visible="invisible"]) {
|
|
display: none;
|
|
}
|
|
input {
|
|
font-size: 20pt;
|
|
line-height: 2.6em;
|
|
height: 2.6em;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
border:none;
|
|
outline:none;
|
|
display: block;
|
|
background: transparent;
|
|
border-bottom: 1px solid #ccc;
|
|
text-indent: 20px;
|
|
}
|
|
</style>
|
|
<section>
|
|
<input type="text" id="filter" placeholder="Filtruj" />
|
|
</section>
|
|
<section id="items">
|
|
<slot name="services"></slot>
|
|
</section>
|
|
`);
|
|
{
|
|
let a = this.shadowRoot.querySelector("#filter"), b = null;
|
|
a.addEventListener("change", (a)=>{
|
|
a.stopPropagation(), this.filter = a.target.value;
|
|
}), a.addEventListener("keyup", (a)=>{
|
|
a.stopPropagation();
|
|
let c = a.target.value;
|
|
b && clearTimeout(b), b = setTimeout(()=>{
|
|
this.filter = c, b = null;
|
|
}, 1000 / 3);
|
|
});
|
|
}
|
|
}
|
|
connectedCallback() {
|
|
this.filter = this.getAttribute("filter");
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get filter() {
|
|
return this.getAttribute("filter");
|
|
}
|
|
set filter(a) {
|
|
if (a && "" !== a) for (let b of (this.setAttribute("filter", a), this.querySelectorAll("local-business")))b.name && (b.name.includes(a) ? b.setAttribute("local-business-visible", "visible") : b.setAttribute("local-business-visible", "invisible"));
|
|
else for (let c of (this.removeAttribute("filter"), this.querySelectorAll("local-business")))c.removeAttribute("local-business-visible");
|
|
}
|
|
});
|
|
customElements.define("login-form", class extends Component {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
${FORM_STYLE}
|
|
</style>
|
|
<form>
|
|
<div>
|
|
<label>Login</label>
|
|
<input name="login" placeholder="Login" type="text" required />
|
|
</div>
|
|
<div>
|
|
<label>Hasło</label>
|
|
<input name="pass" placeholder="Hasło" type="password" required />
|
|
</div>
|
|
<div>
|
|
<input type="button" value="Zaloguj" />
|
|
</div>
|
|
</form>
|
|
`);
|
|
}
|
|
});
|
|
customElements.define("facebook-button", class extends Component {
|
|
#a;
|
|
static get observedAttributes() {
|
|
return [
|
|
"width",
|
|
"height",
|
|
"fb-sdk"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
#not-available {
|
|
display: block;
|
|
}
|
|
#svg {
|
|
display: none;
|
|
}
|
|
:host([fb-sdk="available"]) #not-available {
|
|
display: none;
|
|
}
|
|
:host([fb-sdk="available"]) #svg {
|
|
display: block;
|
|
}
|
|
|
|
${FORM_STYLE}
|
|
</style>
|
|
<p id="not-available">Skrypty Facebook są zablokowane przez rozszerzenie przeglądarki</p>
|
|
<div id="svg">
|
|
<svg id="fb-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xml:space="preserve">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3B5998" d="M448 512h-87.999c-22.094 0-39.999-17.922-39.999-40V360.001c0-22.094 17.905-39.999 39.999-39.999h12.922c8.32 0 16.844-6.656 19.062-15.031l8.484-31.953c2.484-9.312-2.812-17.023-11.852-17.023H360c-22.094 0-39.999-17.902-39.999-39.988v-16C320.001 177.905 337.906 160 360 160h24.008c8.82 0 16-7.156 16-16v-32.004c0-8.828-7.18-16.004-16-16.004H336c-44.187 0-79.991 35.828-79.991 80.011v40.004c0 22.085-17.922 39.988-40.003 39.988h-7.625c-9.039 0-16.379 7.711-16.379 17.023v31.953c0 8.375 6.746 15.031 15.07 15.031h8.934c22.082 0 40.003 17.905 40.003 39.999V472c0 22.078-17.922 40-40.003 40h-8c-8.844 0-16.004-7.172-16.004-16 0-8.844 7.16-16 16.004-16 8.824 0 16-7.172 16-16v-95.999c0-8.844-7.175-16-16-16H197.51c-20.719 0-37.511-16.578-37.511-37.577v-47.922c0-23.156 18.371-42.512 41.027-42.512h6.98c8.824 0 16-7.16 16-15.984v-40.004c0-57.441 46.559-103.995 103.995-103.995h64.008c22.086 0 39.984 17.902 39.984 39.988v48.004c0 22.085-17.898 40.003-39.984 40.003H352.001v16.004c0 8.824 7.156 15.984 16 15.984h29.969c22.672 0 37.398 19.355 33.062 42.512l-8.992 47.922c-3.93 20.999-23.82 37.577-44.539 37.577h-9.5c-8.844 0-16 7.156-16 16V464c0 8.828 7.156 16 16 16H448c17.672 0 32-14.328 32-32V64.007c0-17.688-14.328-32.003-32-32.003H64.007c-17.672 0-32.003 14.316-32.003 32.003V448c0 17.672 14.332 32 32.003 32h16c8.828 0 16.003 7.156 16.003 16 0 8.828-7.175 16-16.003 16h-16C28.668 512 0 483.344 0 448V64.007C0 28.648 28.668 0 64.007 0H448c35.359 0 64 28.648 64 64.007V448c0 35.344-28.641 64-64 64zm-304.001-32c8.844 0 16 7.156 16 16 0 8.828-7.156 16-16 16-8.828 0-16.004-7.172-16.004-16 0-8.844 7.176-16 16.004-16z"/>
|
|
</svg>
|
|
<slot></slot>
|
|
</div>
|
|
`), this.shadowRoot.querySelector("#fb-icon").addEventListener("click", (a)=>{
|
|
if (a.stopPropagation(), a.preventDefault(), !this.#a) return console.info("Facebook SDK is not available");
|
|
FB.login((a)=>{
|
|
"connected" === a.status && FB.api("/me?fields=id,name,email", ({ id: a , name: b , email: c })=>{
|
|
console.info({
|
|
id: a,
|
|
name: b,
|
|
email: c
|
|
}), this.dispatchEvent(new CustomEvent("facebook:account", {
|
|
bubbles: !0,
|
|
composed: !0,
|
|
detail: {
|
|
id: a,
|
|
name: b,
|
|
email: c
|
|
}
|
|
}));
|
|
});
|
|
}, {
|
|
scope: "public_profile,email",
|
|
return_scopes: !0
|
|
});
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
super.connectedCallback(), runFbReady(()=>{
|
|
this.setAttribute("fb-sdk", "available"), this.dispatchEvent(new CustomEvent("facebook:available", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
}));
|
|
});
|
|
}
|
|
get width() {
|
|
return this.getAttribute("width");
|
|
}
|
|
set width(a) {
|
|
this.setAttribute("width", a), this.shadowRoot.querySelector("svg").setAttribute("width", a);
|
|
}
|
|
get height() {
|
|
return this.getAttribute("width");
|
|
}
|
|
set height(a) {
|
|
this.setAttribute("height", a), this.shadowRoot.querySelector("svg").setAttribute("height", a);
|
|
}
|
|
get fb_sdk() {
|
|
return !!this.#a;
|
|
}
|
|
set fb_sdk(a) {
|
|
this.setAttribute("fb-sdk", a), this.#a = "available" === a;
|
|
}
|
|
});
|
|
customElements.define("account-view", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"facebook-id",
|
|
"id",
|
|
"name",
|
|
"email"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
:host(:not([facebook-id = ""])) #fb-id {
|
|
display: block;
|
|
}
|
|
:host([facebook-id = ""]) #fb-id {
|
|
display: none;
|
|
}
|
|
:host([facebook-id = ""]) #fb-button {
|
|
display: flex;
|
|
padding: .375rem .75rem;
|
|
}
|
|
#fb-button {
|
|
display: none;
|
|
}
|
|
facebook-button {
|
|
margin-right: 16px;
|
|
}
|
|
${FORM_STYLE}
|
|
</style>
|
|
<div>
|
|
<input id="id" name="id" readonly type="hidden" />
|
|
</div>
|
|
<div>
|
|
<label>Login</label>
|
|
<input id="name" name="name" readonly />
|
|
</div>
|
|
<div>
|
|
<label>E-Mail</label>
|
|
<input id="email" name="email" readonly />
|
|
</div>
|
|
<div id="fb-button">
|
|
<facebook-button width="100">
|
|
<p>Powiąż z kontem Facebook</p>
|
|
</facebook-button>
|
|
</div>
|
|
<div id="fb-id">
|
|
<label>Powiązane konto Facebook</label>
|
|
<input id="facebook_id" name="facebook_id" readonly />
|
|
</div>
|
|
`), this.addEventListener("facebook:available", (a)=>{
|
|
a.preventDefault(), a.stopPropagation();
|
|
});
|
|
}
|
|
get name() {
|
|
return this.getAttribute("name") || "";
|
|
}
|
|
set name(a) {
|
|
this.setAttribute("name", a), this.shadowRoot.querySelector("#name").value = a;
|
|
}
|
|
get email() {
|
|
return this.getAttribute("email") || "";
|
|
}
|
|
set email(a) {
|
|
this.setAttribute("email", a), this.shadowRoot.querySelector("#email").value = a;
|
|
}
|
|
get facebook_id() {
|
|
return this.getAttribute("facebook-id");
|
|
}
|
|
set facebook_id(a) {
|
|
this.setAttribute("facebook-id", a), this.shadowRoot.querySelector("#facebook_id").value = a;
|
|
}
|
|
});
|
|
customElements.define("ow-account", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"mode",
|
|
"id",
|
|
"name",
|
|
"email",
|
|
"facebook-id"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
#form > * {
|
|
display: none;
|
|
}
|
|
:host([mode="login"]) #form > login-form, :host([mode="login"]) #switch-register {
|
|
display: block !important;
|
|
}
|
|
:host([mode="register"]) #form > register-form, :host([mode="register"]) #switch-login {
|
|
display: block !important;
|
|
}
|
|
account-view {
|
|
display: none;
|
|
}
|
|
:host([mode="display"]) account-view { display: block; }
|
|
:host([mode="display"]) #form { display: none; }
|
|
:host([mode="form"]) #form,
|
|
:host([mode="login"]) #form { display: block; }
|
|
|
|
a {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
a:hover {
|
|
color: var(--hover-color);
|
|
border-bottom-color: var(--hover-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
${FORM_STYLE}
|
|
</style>
|
|
<article id="form">
|
|
<login-form></login-form>
|
|
<register-form></register-form>
|
|
<section id="switch-register">
|
|
<a>Nie masz konta? Utwórz nowe</a>
|
|
</section>
|
|
<section id="switch-login">
|
|
<a>Masz konta? Zaloguj się</a>
|
|
</section>
|
|
</article>
|
|
<account-view></account-view>
|
|
`), this.shadowRoot.querySelector("#switch-login > a").addEventListener("click", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.mode = "login";
|
|
}), this.shadowRoot.querySelector("#switch-register > a").addEventListener("click", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.mode = "register";
|
|
}), this.addEventListener("facebook:account", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.mode = "facebook";
|
|
let { id: b , name: c , email: d } = a.details;
|
|
console.info({
|
|
id: b,
|
|
name: c,
|
|
email: d
|
|
});
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
"" === this.mode && (this.mode = "login"), this.name = this.name, this.email = this.email, this.facebook_id = this.facebook_id;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get mode() {
|
|
return this.getAttribute("mode") || "";
|
|
}
|
|
set mode(a) {
|
|
a = [
|
|
"login",
|
|
"register",
|
|
"display"
|
|
].includes(a) ? a : "login", this.setAttribute("mode", a);
|
|
}
|
|
get name() {
|
|
return this.getAttribute("name") || "";
|
|
}
|
|
set name(a) {
|
|
this.setAttribute("name", a), this.shadowRoot.querySelector("account-view").name = a;
|
|
}
|
|
get email() {
|
|
return this.getAttribute("email") || "";
|
|
}
|
|
set email(a) {
|
|
this.setAttribute("email", a), this.shadowRoot.querySelector("account-view").email = a;
|
|
}
|
|
get facebook_id() {
|
|
return this.getAttribute("facebook-id");
|
|
}
|
|
set facebook_id(a) {
|
|
this.setAttribute("facebook-id", a), this.shadowRoot.querySelector("account-view").facebook_id = a;
|
|
}
|
|
});
|
|
customElements.define("ow-nav", class extends Component {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
section {
|
|
display: flex;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
|
|
margin-bottom: 12px;
|
|
color: #2b2727;
|
|
font-family: Raleway, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 32px;
|
|
}
|
|
section::after {
|
|
display: block;
|
|
content: ' ';
|
|
border: none;
|
|
padding: 10px 18px;
|
|
text-decoration: none;
|
|
color: #2b2727;
|
|
text-transform: uppercase;
|
|
align-self: stretch;
|
|
flex-shrink: 20;
|
|
flex-grow: 20;
|
|
}
|
|
</style>
|
|
<section>
|
|
<slot></slot>
|
|
</section>
|
|
`);
|
|
}
|
|
});
|
|
customElements.define("ow-path", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"selected",
|
|
"path"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
a {
|
|
display: block;
|
|
padding: 10px 18px;
|
|
text-decoration: none;
|
|
color: #495057;
|
|
text-transform: uppercase;
|
|
|
|
border: none;
|
|
border-bottom: 1px solid var(--border-slim-color);
|
|
}
|
|
a:hover {
|
|
color: var(--hover-color);
|
|
}
|
|
:host(:not([selected])) a {
|
|
border: none;
|
|
}
|
|
</style>
|
|
<a><slot></slot></a>
|
|
`);
|
|
}
|
|
connectedCallback() {
|
|
this.selected = this.getAttribute("selected");
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get selected() {
|
|
return "selected" === this.getAttribute("selected");
|
|
}
|
|
set selected(a) {
|
|
"selected" === a ? this.setAttribute("selected", "selected") : this.removeAttribute("selected");
|
|
}
|
|
get path() {
|
|
return this.getAttribute("path") || "";
|
|
}
|
|
set path(a) {
|
|
if (!a || "" === a) {
|
|
this.removeAttribute("path");
|
|
return;
|
|
}
|
|
this.setAttribute("path", a), this.shadowRoot.querySelector("a").setAttribute("href", a);
|
|
}
|
|
});
|
|
customElements.define("price-view", class extends HTMLElement {
|
|
#a;
|
|
static get observedAttributes() {
|
|
return [
|
|
"value",
|
|
"currency"
|
|
];
|
|
}
|
|
constructor(){
|
|
super();
|
|
let a = this.#a = this.attachShadow({
|
|
mode: "closed"
|
|
});
|
|
a.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
#price {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<span id="price"></span>
|
|
`;
|
|
}
|
|
connectedCallback() {
|
|
this.#a.querySelector("#price").textContent = this.formatted;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
b !== c && "price" === a && (this.value = c);
|
|
}
|
|
get formatted() {
|
|
let a = this.value, b = a % 100;
|
|
return `${Math.ceil(a / 100)},${b < 10 ? `0${b}` : b}${this.currency}`;
|
|
}
|
|
get value() {
|
|
let a = parseInt(this.getAttribute("value"));
|
|
return isNaN(a) ? 0 : a;
|
|
}
|
|
set value(a) {
|
|
this.setAttribute("value", a), this.#a.querySelector("#price").textContent = this.formatted;
|
|
}
|
|
get currency() {
|
|
return this.getAttribute("currency") || "PLN";
|
|
}
|
|
});
|
|
customElements.define("price-input", class extends HTMLElement {
|
|
#a;
|
|
static get observedAttributes() {
|
|
return [
|
|
"value",
|
|
"currency",
|
|
"required",
|
|
"name"
|
|
];
|
|
}
|
|
constructor(){
|
|
super();
|
|
let b = this.#a = this.attachShadow({
|
|
mode: "closed"
|
|
});
|
|
b.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
#price {
|
|
font-weight: bold;
|
|
}
|
|
#view {
|
|
display: flex;
|
|
}
|
|
#value {
|
|
display: flex;
|
|
justify-content: start;
|
|
}
|
|
${FORM_STYLE}
|
|
</style>
|
|
<div id="view">
|
|
<input
|
|
id="price" type="number" min="0.00" max="10000.00" step="0.01"
|
|
placeholder="Cena, np: 12.23"
|
|
/>
|
|
<span id="currency"></span>
|
|
</div>
|
|
`;
|
|
let c = b.querySelector("#price");
|
|
c.addEventListener("change", (a)=>{
|
|
a.stopPropagation(), this.value = c.value;
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.#a.querySelector("#currency").textContent = this.currency, this.#a.querySelector("#price").value = this.value;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
if (b === c) return;
|
|
let d = this.#a.querySelector("#price");
|
|
switch(a){
|
|
case "price":
|
|
this.value = c;
|
|
break;
|
|
case "currency":
|
|
this.currency = c;
|
|
break;
|
|
case "required":
|
|
c ? d.setAttribute("required", "required") : d.removeAttribute("required");
|
|
break;
|
|
case "readonly":
|
|
c ? d.setAttribute("readonly", "readonly") : d.removeAttribute("readonly");
|
|
break;
|
|
case "name":
|
|
this.setAttribute("name", c);
|
|
}
|
|
}
|
|
get value() {
|
|
return Math.floor(100 * parseFloat(this.#a.querySelector("#price").value));
|
|
}
|
|
set value(a) {
|
|
this.setAttribute("value", a), this.#a.querySelector("#price").value = a;
|
|
}
|
|
get currency() {
|
|
return this.getAttribute("currency") || "PLN";
|
|
}
|
|
set currency(a) {
|
|
this.setAttribute("currency", a), this.#a.querySelector("#currency").textContent = this.currency;
|
|
}
|
|
reportValidity() {
|
|
return this.#a.querySelector("input").reportValidity();
|
|
}
|
|
get name() {
|
|
return this.getAttribute("name");
|
|
}
|
|
set name(a) {
|
|
this.setAttribute("name", a);
|
|
}
|
|
});
|
|
customElements.define("register-basic-form", class extends PseudoForm {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
${FORM_STYLE}
|
|
</style>
|
|
<form id="step-1">
|
|
<div>
|
|
<label>Login</label>
|
|
<input id="login" name="login" placeholder="Login" type="text" required autofocus />
|
|
</div>
|
|
<div>
|
|
<label>E-Mail</label>
|
|
<input name="email" placeholder="Email" type="email" required />
|
|
</div>
|
|
<div>
|
|
<label>Hasło</label>
|
|
<input name="pass" placeholder="Hasło" type="password" required />
|
|
</div>
|
|
<form-navigation></form-navigation>
|
|
</form>
|
|
`);
|
|
let b = this.shadowRoot.querySelector("form");
|
|
b.addEventListener("submit", (a)=>{
|
|
a.preventDefault(), a.stopPropagation(), this.shadowRoot.querySelector("form-navigation").next();
|
|
});
|
|
}
|
|
});
|
|
let c = (b)=>`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
|
|
form {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
#fields > *:not(:last-child) {
|
|
margin-right: 16px;
|
|
}
|
|
#fields > div > label {
|
|
margin-right: 16px;
|
|
}
|
|
#fields {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
${FORM_STYLE}
|
|
</style>
|
|
<form class="inline">
|
|
<div id="fields">
|
|
<image-input></image-input>
|
|
<input type="hidden" name="picture_url" id="picture_url" />
|
|
<div id="name" class="field">
|
|
<label>Nazwa</label>
|
|
<input class="item-name" name="items[${b}][name]" type="text" required>
|
|
</div>
|
|
<div id="price" class="field">
|
|
<label>Cena</label>
|
|
<price-input class="item-price" name="items[${b}][price]" required>
|
|
</price-input>
|
|
</div>
|
|
</div>
|
|
<div><input class="remove" type="button" value="Usuń"></div>
|
|
</form>
|
|
`;
|
|
customElements.define("register-item-form-row", class extends PseudoForm {
|
|
static get observedAttributes() {
|
|
return [
|
|
"idx",
|
|
"name"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(c()), this.addEventListener("item:removed", ()=>{
|
|
this.setAttribute("removed", "removed");
|
|
let a = this.parentElement;
|
|
this.remove(), a.dispatchEvent(new CustomEvent("item:removed", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
}));
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.shadowRoot.innerHTML = c(this.idx);
|
|
let a = this.shadowRoot.querySelector("image-input");
|
|
this.addEventListener("image-input:uploaded", (b)=>{
|
|
b.preventDefault(), b.stopPropagation(), this.picture_url = a.url;
|
|
}), this.shadowRoot.querySelector("form").addEventListener("submit", (a)=>{
|
|
a.preventDefault(), a.stopPropagation(), this.reportValidity();
|
|
}), this.shadowRoot.querySelector(".remove").addEventListener("click", (a)=>{
|
|
a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("item:removed", {
|
|
bubbles: !0,
|
|
composed: !1
|
|
}));
|
|
});
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
if (b !== c) switch(a){
|
|
case "idx":
|
|
return this.updateNames();
|
|
case "picture-url":
|
|
return this.picture_url = c;
|
|
}
|
|
}
|
|
get inputs() {
|
|
return [
|
|
d(this.shadowRoot.querySelector(".item-name")),
|
|
d(this.shadowRoot.querySelector(".item-price")),
|
|
];
|
|
}
|
|
updateNames() {
|
|
let a = this.getAttribute("idx");
|
|
for (let b of this.shadowRoot.querySelectorAll(".field")){
|
|
let c = b.id;
|
|
b.querySelector("input, price-input").setAttribute("name", `items[${a}][${c}]`);
|
|
}
|
|
}
|
|
get idx() {
|
|
return this.getAttribute("idx");
|
|
}
|
|
set idx(a) {
|
|
this.setAttribute("idx", a);
|
|
}
|
|
get picture_url() {
|
|
return this.getAttribute("picture-url");
|
|
}
|
|
set picture_url(a) {
|
|
this.setAttribute("picture-url", a), this.shadowRoot.querySelector("image-input").url = a, this.shadowRoot.querySelector("#picture_url").value = a;
|
|
}
|
|
reportValidity() {
|
|
return super.reportValidity() && this.shadowRoot.querySelector("price-input").reportValidity();
|
|
}
|
|
});
|
|
let d = ({ name: a , value: b })=>({
|
|
name: a,
|
|
value: b
|
|
});
|
|
let c1 = (a)=>{
|
|
let b = 0;
|
|
for (let c of a.querySelectorAll("register-item-form-row"))c.idx = b++;
|
|
return b;
|
|
};
|
|
customElements.define("register-items-form", class extends PseudoForm {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
|
|
::slotted(section) {
|
|
display: flex;
|
|
}
|
|
|
|
${FORM_STYLE}
|
|
</style>
|
|
<form>
|
|
<article id="items">
|
|
<slot></slot>
|
|
</article>
|
|
<div>
|
|
<input type="button" id="add-item" value="Dodaj usługę/produkt" />
|
|
</div>
|
|
<form-navigation></form-navigation>
|
|
</form>
|
|
`), this.addEventListener("item:removed", (a)=>{
|
|
a.stopPropagation(), c1(this);
|
|
}), this.addEventListener("form:next", (a)=>{
|
|
for (let b of this.querySelectorAll("item-form-row"))b.reportValidity() || (a.stopPropagation(), a.preventDefault());
|
|
}), this.shadowRoot.querySelector("#add-item").addEventListener("click", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.appendChild(document.createElement("register-item-form-row")), c1(this);
|
|
});
|
|
}
|
|
get inputs() {
|
|
return [
|
|
...this.querySelectorAll("register-item-form-row")
|
|
].map((a)=>a.inputs);
|
|
}
|
|
});
|
|
customElements.define("register-business-form", class extends PseudoForm {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
${FORM_STYLE}
|
|
</style>
|
|
<form id="step-2">
|
|
<div>
|
|
<input name="name" placeholder="Nazwa usługi" type="text" required autofocus />
|
|
</div>
|
|
<div>
|
|
<label>description</label>
|
|
<textarea name="description" required></textarea>
|
|
</div>
|
|
<form-navigation></form-navigation>
|
|
</form>
|
|
`), this.shadowRoot.querySelector("form").addEventListener("submit", (a)=>{
|
|
a.preventDefault(), a.stopPropagation(), this.shadowRoot.querySelector("form-navigation").next();
|
|
});
|
|
}
|
|
});
|
|
customElements.define("register-submit-form", class extends PseudoForm {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
${FORM_STYLE}
|
|
.item-view {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.item-view > * {
|
|
min-width: 100px;
|
|
max-width: 48%;
|
|
}
|
|
</style>
|
|
<form id="step-4" method="post" action="/register">
|
|
<div id="copied">
|
|
<input id="hidden-login" name="login" type="hidden" />
|
|
<input id="hidden-email" name="email" type="hidden" />
|
|
<input id="hidden-pass" name="password" type="hidden" />
|
|
<input id="hidden-name" name="name" type="hidden" />
|
|
<input id="hidden-description" name="description" type="hidden" />
|
|
</div>
|
|
<div>
|
|
<label>Login</label>
|
|
<input readonly id="preview-login">
|
|
</div>
|
|
<div>
|
|
<label>Email</label>
|
|
<input readonly id="preview-email">
|
|
</div>
|
|
<div>
|
|
<label>Password</label>
|
|
<input readonly id="preview-pass" type="password">
|
|
</div>
|
|
<div>
|
|
<label>Name</label>
|
|
<input readonly id="preview-name">
|
|
</div>
|
|
<div>
|
|
<label>Description</label>
|
|
<input readonly id="preview-description">
|
|
</div>
|
|
<input type="hidden" name="account_type" id="account_type" />
|
|
<div id="items">
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<form-navigation next="hidden"></form-navigation>
|
|
<input type="submit" value="Dodaj usługi/produkty" />
|
|
</div>
|
|
</form>
|
|
`);
|
|
}
|
|
updateField(a, b) {
|
|
this.shadowRoot.querySelector(`[id="hidden-${a}"]`).value = b, this.shadowRoot.querySelector(`[id="preview-${a}"]`).value = b;
|
|
}
|
|
setItems(a) {
|
|
let b = this.shadowRoot.querySelector("#items");
|
|
for (let c of (b.innerHTML = "", a)){
|
|
let d = b.appendChild(document.createElement("div"));
|
|
d.className = "item-view";
|
|
let [e, f] = c;
|
|
d.innerHTML = `
|
|
<input type="text" name="${e.name}" value="${e.value}" readonly />
|
|
<input type="hidden" name="${f.name}" value="${f.value}" readonly />
|
|
<price-view value="${f.value}"></price-view>
|
|
`;
|
|
}
|
|
}
|
|
set accountType(a) {
|
|
this.shadowRoot.querySelector("#account_type").value = a;
|
|
}
|
|
});
|
|
customElements.define("register-user-type", class extends Component {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
ul, li {
|
|
list-style: none;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
a {
|
|
display: block;
|
|
border: 1px solid var(--border-slim-color);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: var(--border-slim-color);
|
|
}
|
|
svg {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
svg, path {
|
|
fill: var(--border-slim-color) !important;
|
|
}
|
|
</style>
|
|
<article>
|
|
<ul>
|
|
<li>
|
|
<a id="user">
|
|
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5.875a3.625 3.625 0 0 0-1.006 7.109c-1.194.145-2.218.567-2.99 1.328-.982.967-1.479 2.408-1.479 4.288a.475.475 0 1 0 .95 0c0-1.72.453-2.88 1.196-3.612.744-.733 1.856-1.113 3.329-1.113s2.585.38 3.33 1.113c.742.733 1.195 1.892 1.195 3.612a.475.475 0 1 0 .95 0c0-1.88-.497-3.32-1.48-4.288-.77-.76-1.795-1.183-2.989-1.328A3.627 3.627 0 0 0 7.5.875ZM4.825 4.5a2.675 2.675 0 1 1 5.35 0 2.675 2.675 0 0 1-5.35 0Z" fill="currentColor"/>
|
|
</svg>
|
|
<div>Użytkownik</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a id="local-service">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 489.4 489.4" xml:space="preserve">
|
|
<path d="M347.7 263.75h-66.5c-18.2 0-33 14.8-33 33v51c0 18.2 14.8 33 33 33h66.5c18.2 0 33-14.8 33-33v-51c0-18.2-14.8-33-33-33zm9 84c0 5-4.1 9-9 9h-66.5c-5 0-9-4.1-9-9v-51c0-5 4.1-9 9-9h66.5c5 0 9 4.1 9 9v51z"/>
|
|
<path d="M489.4 171.05c0-2.1-.5-4.1-1.6-5.9l-72.8-128c-2.1-3.7-6.1-6.1-10.4-6.1H84.7c-4.3 0-8.3 2.3-10.4 6.1l-72.7 128c-1 1.8-1.6 3.8-1.6 5.9 0 28.7 17.3 53.3 42 64.2v211.1c0 6.6 5.4 12 12 12h381.3c6.6 0 12-5.4 12-12v-209.6c0-.5 0-.9-.1-1.3 24.8-10.9 42.2-35.6 42.2-64.4zM91.7 55.15h305.9l56.9 100.1H34.9l56.8-100.1zm256.6 124c-3.8 21.6-22.7 38-45.4 38s-41.6-16.4-45.4-38h90.8zm-116.3 0c-3.8 21.6-22.7 38-45.4 38s-41.6-16.4-45.5-38H232zm-207.2 0h90.9c-3.8 21.6-22.8 38-45.5 38-22.7.1-41.6-16.4-45.4-38zm176.8 255.2h-69v-129.5c0-9.4 7.6-17.1 17.1-17.1h34.9c9.4 0 17.1 7.6 17.1 17.1v129.5h-.1zm221.7 0H225.6v-129.5c0-22.6-18.4-41.1-41.1-41.1h-34.9c-22.6 0-41.1 18.4-41.1 41.1v129.6H66v-193.3c1.4.1 2.8.1 4.2.1 24.2 0 45.6-12.3 58.2-31 12.6 18.7 34 31 58.2 31s45.5-12.3 58.2-31c12.6 18.7 34 31 58.1 31 24.2 0 45.5-12.3 58.1-31 12.6 18.7 34 31 58.2 31 1.4 0 2.7-.1 4.1-.1v193.2zm-4.1-217.1c-22.7 0-41.6-16.4-45.4-38h90.9c-3.9 21.5-22.8 38-45.5 38z"/>
|
|
</svg>
|
|
<div>Usługodawca</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
`);
|
|
let a = this.shadowRoot.querySelector("#user");
|
|
a.addEventListener("click", (a)=>{
|
|
a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("account:type:user", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
}));
|
|
});
|
|
let b = this.shadowRoot.querySelector("#local-service");
|
|
b.addEventListener("click", (a)=>{
|
|
a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("account:type:local-service", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
}));
|
|
});
|
|
}
|
|
});
|
|
customElements.define("register-user-form", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"mode"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
#icons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#form {
|
|
display: none;
|
|
}
|
|
:host([mode="email"]) #form {
|
|
display: block;
|
|
}
|
|
:host([mode="email"]) #email-icon {
|
|
display: none;
|
|
}
|
|
#icons .option {
|
|
display: block;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.option {
|
|
min-width: 45%;
|
|
}
|
|
${FORM_STYLE}
|
|
</style>
|
|
<section id="icons">
|
|
<div class="option">
|
|
<svg id="email-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
|
<path d="M123.25 24.192c0-.018 0-.034-.005-.052s-.007-.063-.009-.094a1.734 1.734 0 0 0-.083-.408c-.006-.018 0-.037-.011-.055s-.01-.015-.013-.023a1.734 1.734 0 0 0-.227-.407c-.021-.028-.043-.053-.066-.08a1.755 1.755 0 0 0-.31-.294c-.012-.009-.022-.02-.034-.028a1.744 1.744 0 0 0-.414-.2c-.034-.012-.068-.022-.1-.032a1.733 1.733 0 0 0-.474-.073H6.5a1.733 1.733 0 0 0-.474.073c-.035.01-.068.02-.1.032a1.744 1.744 0 0 0-.414.2c-.012.008-.022.019-.034.028a1.755 1.755 0 0 0-.31.294c-.022.027-.045.052-.066.08a1.734 1.734 0 0 0-.227.407c0 .008-.01.015-.013.023s-.005.037-.011.055a1.734 1.734 0 0 0-.083.408c0 .032-.009.063-.009.094s-.005.034-.005.052v79.615c0 .023.006.045.007.068a1.737 1.737 0 0 0 .019.188c.008.051.015.1.027.152a1.74 1.74 0 0 0 .056.179c.017.047.033.094.054.139a1.729 1.729 0 0 0 .093.172c.024.04.048.081.075.119a1.743 1.743 0 0 0 .125.152c.033.036.066.072.1.106.021.019.037.042.059.061s.036.017.052.03a1.736 1.736 0 0 0 .452.263c.035.014.071.022.107.033a1.732 1.732 0 0 0 .488.085c.012 0 .023.006.035.006H121.501c.012 0 .023-.006.034-.006a1.732 1.732 0 0 0 .489-.085c.035-.011.07-.019.1-.033a1.736 1.736 0 0 0 .453-.263c.016-.013.036-.017.052-.03s.038-.042.059-.061c.036-.034.069-.069.1-.106a1.743 1.743 0 0 0 .125-.152c.027-.038.051-.078.075-.119a1.729 1.729 0 0 0 .093-.172c.021-.045.037-.092.054-.139a1.74 1.74 0 0 0 .056-.179c.012-.05.019-.1.027-.152a1.737 1.737 0 0 0 .019-.188c0-.023.007-.045.007-.068zM45.8 60.316l17.058 14.677a1.751 1.751 0 0 0 2.283 0L82.2 60.316l35.512 41.741H10.289zM8.25 99.052V28.007l34.9 30.026zm76.6-41.019 34.9-30.026v71.045zm31.931-32.091L81.276 56.493c-.006.005-.014.008-.02.014l-.019.02L64 71.358 46.763 56.527l-.019-.02-.02-.014-35.507-30.551z"/>
|
|
</svg>
|
|
|
|
<form id="form" method="post" action="/register">
|
|
<input type="hidden" id="account_type" name="account_type">
|
|
<input type="hidden" id="facebook_id" name="facebook_id">
|
|
<div>
|
|
<label>E-Mail</label>
|
|
<input id="email" type="email" name="email">
|
|
</div>
|
|
<div>
|
|
<label>Login</label>
|
|
<input id="login" type="text" name="login">
|
|
</div>
|
|
<div>
|
|
<label>Hasło</label>
|
|
<input id="password" type="password" name="password">
|
|
</div>
|
|
<div>
|
|
<input type="submit" value="Zarejestruj" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="option">
|
|
<facebook-button></facebook-button>
|
|
</div>
|
|
</section>
|
|
`);
|
|
let a = this.shadowRoot.querySelector("form");
|
|
this.addEventListener("facebook:account", (b)=>{
|
|
b.stopPropagation(), b.preventDefault(), this.mode = "facebook";
|
|
let { id: c , name: d , email: e } = b.detail;
|
|
a.querySelector("#email").value = e, a.querySelector("#login").value = d, a.querySelector("#password").value = crypto.randomUUID(), a.querySelector("#facebook_id").value = c, a.querySelector("#account_type").value = "User", a.submit();
|
|
}), this.shadowRoot.querySelector("#email-icon").addEventListener("click", (a)=>{
|
|
a.stopPropagation(), a.preventDefault(), this.mode = "email";
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.mode = "";
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
b !== c && "mode" === a && ("email" === c || "facebook" === c || "" === c) && (this.mode = c);
|
|
}
|
|
get mode() {
|
|
return this.getAttribute("mode") || "";
|
|
}
|
|
set mode(a) {
|
|
this.setAttribute("mode", a);
|
|
}
|
|
});
|
|
customElements.define("register-form", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"step"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
* { font-family: 'Noto Sans', sans-serif; }
|
|
[id^="step-"] { display: none; }
|
|
:host([step="0"]) #step-0 { display: block; }
|
|
:host([step="1"]) #step-1 { display: block; }
|
|
:host([step="2"]) #step-2 { display: block; }
|
|
:host([step="3"]) #step-3 { display: block; }
|
|
:host([step="4"]) #step-4 { display: block; }
|
|
:host([step="40"]) #step-40 { display: block; }
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.actions > input:first-child {
|
|
margin-right: 8px;
|
|
}
|
|
.actions > input:last-child {
|
|
margin-left: 8px;
|
|
}
|
|
#step-4 > #copied {
|
|
display: none;
|
|
}
|
|
|
|
${FORM_STYLE}
|
|
</style>
|
|
<article id="host">
|
|
</article>
|
|
<article>
|
|
<register-user-type id="step-0"> </register-user-type>
|
|
<register-basic-form id="step-1"></register-basic-form>
|
|
<register-business-form id="step-2"></register-business-form>
|
|
<register-items-form id="step-3"></register-items-form>
|
|
<register-submit-form id="step-4"></register-submit-form>
|
|
<register-user-form id="step-40"></register-user-form>
|
|
</article>
|
|
`);
|
|
let a = this.shadowRoot.querySelector("#step-4");
|
|
this.shadowRoot.addEventListener("account:type:user", (b)=>{
|
|
b.stopPropagation(), a.accountType = "User", this.step = 40;
|
|
}), this.shadowRoot.addEventListener("account:type:local-service", (b)=>{
|
|
b.stopPropagation(), a.accountType = "Business", this.step = 1;
|
|
}), this.shadowRoot.addEventListener("form:next", (b)=>{
|
|
b.stopPropagation();
|
|
let c = this.shadowRoot.querySelector(`#step-${this.step}`);
|
|
this.#a(c, a) && (this.step = this.step + 1);
|
|
}), this.shadowRoot.addEventListener("form:prev", (a)=>{
|
|
a.stopPropagation(), this.step = this.step - 1;
|
|
}), a.addEventListener("submit", (a)=>{
|
|
a.preventDefault(), a.stopPropagation();
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.step = 0;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get step() {
|
|
let a = parseInt(this.getAttribute("step"));
|
|
return isNaN(a) ? 1 : a;
|
|
}
|
|
set step(a) {
|
|
a < 0 || this.setAttribute("step", a);
|
|
}
|
|
#a(a, d) {
|
|
for (let e of (a.reportValidity(), a.elements))if ("" !== e.name && !e.reportValidity()) return !1;
|
|
let f = a.inputs;
|
|
if (f) d.setItems(f);
|
|
else for (let g of a.elements)"" !== g.name && d.updateField(g.name, g.value);
|
|
return !0;
|
|
}
|
|
});
|
|
customElements.define("image-input", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"width",
|
|
"height",
|
|
"account-id",
|
|
"url"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
border: 1px solid var(--border-light-gray-color);
|
|
border-radius: 8px;
|
|
}
|
|
#hidden { overflow: hidden; width: 1px; height: 1px; position: relative; }
|
|
input[type=file] { position: absolute; top: -10px; left: -10px; display: none; }
|
|
#view { width: 200px; height: 200px; cursor: pointer; }
|
|
canvas { width: 200px; height: 200px; }
|
|
div > input[type=button] {
|
|
margin: 0;
|
|
width: 100%;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
border-color: var(--border-light-gray-color);
|
|
}
|
|
${BUTTON_STYLE}
|
|
</style>
|
|
<article>
|
|
<section id="hidden">
|
|
<input id="file" type="file" accept="image/*" />
|
|
<img alt="" src="" />
|
|
</section>
|
|
<div id="view">
|
|
<canvas width="200" height="200"></canvas>
|
|
</div>
|
|
<div>
|
|
<input id="save" type="button" value="Zapisz" />
|
|
</div>
|
|
</article>
|
|
`), this.shadowRoot.querySelector("#save").addEventListener("click", (a)=>{
|
|
a.preventDefault(), a.stopPropagation();
|
|
let b = document.createElement("canvas");
|
|
b.width = this.width, b.height = this.height, b.getContext("2d").putImageData(g.getImageData(0, 0, this.width, this.height), 0, 0);
|
|
let c = atob(b.toDataURL("image/webp", 1.0).split(",")[1]), d = [];
|
|
for(let e = 0; e < c.length; e++)d.push(c.charCodeAt(e));
|
|
let f = new Blob([
|
|
new Uint8Array(d)
|
|
], {
|
|
type: "image/webp"
|
|
}), h = new FormData;
|
|
h.append(`${crypto.randomUUID()}.webp`, f), fetch("/upload", {
|
|
method: "POST",
|
|
body: h
|
|
}).then((a)=>a.json()).then(({ path: a })=>{
|
|
this.url = a, this.dispatchEvent(new CustomEvent("image-input:uploaded", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
}));
|
|
});
|
|
});
|
|
let b = new FileReader(), c = this.shadowRoot.querySelector("#file"), d = this.shadowRoot.querySelector("#view"), e = this.shadowRoot.querySelector("img"), f = this.shadowRoot.querySelector("canvas"), g = f.getContext("2d");
|
|
e.addEventListener("load", ()=>{
|
|
let a, b;
|
|
e.width > e.height ? (a = 200, b = 200 * e.height / e.width) : (a = 200 * e.width / e.height, b = 200), this.setAttribute("width", a), this.setAttribute("height", b), e.width = a, e.height = b, g.clearRect(0, 0, 200, 200), g.drawImage(e, 0, 0, a, b);
|
|
}), c.addEventListener("change", (a)=>{
|
|
a.stopPropagation(), b.addEventListener("loadend", (a)=>{
|
|
a.total === a.loaded && (e.src = a.target.result || "");
|
|
}), b.readAsDataURL(a.target.files[0]);
|
|
}), d.addEventListener("click", (a)=>{
|
|
a.stopPropagation(), c.click();
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.account_id = this.account_id, this.url = this.url;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
super.attributeChangedCallback(a, b, c);
|
|
}
|
|
get account_id() {
|
|
return this.getAttribute("account-id");
|
|
}
|
|
set account_id(a) {
|
|
this.setAttribute("account-id", a);
|
|
}
|
|
get width() {
|
|
let a = parseInt(this.getAttribute("width"));
|
|
return isNaN(a) ? 0 : a;
|
|
}
|
|
set width(a) {
|
|
this.setAttribute("width", a);
|
|
}
|
|
get height() {
|
|
let a = parseInt(this.getAttribute("height"));
|
|
return isNaN(a) ? 0 : a;
|
|
}
|
|
set height(a) {
|
|
this.setAttribute("height", a);
|
|
}
|
|
get url() {
|
|
return this.getAttribute("url");
|
|
}
|
|
set url(a) {
|
|
this.setAttribute("url", a), this.shadowRoot.querySelector("img").src = a;
|
|
}
|
|
});
|
|
customElements.define("business-item", class extends Component {
|
|
static get observedAttributes() {
|
|
return [
|
|
"item-id",
|
|
"name",
|
|
"price",
|
|
"picture-url",
|
|
"item-order"
|
|
];
|
|
}
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
section { display: flex; justify-content: space-between; }
|
|
#form {
|
|
display: none;
|
|
}
|
|
</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" />
|
|
</form>
|
|
</section>
|
|
`);
|
|
let a = this.shadowRoot.querySelector("image-input");
|
|
this.addEventListener("image-input:uploaded", (b)=>{
|
|
b.preventDefault(), b.stopPropagation(), this.picture_url = a.url;
|
|
let c = this.shadowRoot.querySelector("form");
|
|
c.querySelector("#id").value = this.item_id, c.querySelector("#name").value = this.name, c.querySelector("#price").value = this.price, c.querySelector("#picture_url").value = this.picture_url, c.querySelector("#item_order").value = this.item_order, c.submit();
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.item_id = this.item_id, this.name = this.name, this.price = this.price, this.picture_url = this.picture_url;
|
|
}
|
|
attributeChangedCallback(a, b, c) {
|
|
if (super.attributeChangedCallback(a, b, c), b !== c && "price" === a) return this.price = c / 100.0;
|
|
}
|
|
static get attr2FieldBlacklist() {
|
|
return [
|
|
"price"
|
|
];
|
|
}
|
|
get item_id() {
|
|
return this.getAttribute("item-id");
|
|
}
|
|
set item_id(a) {
|
|
this.setAttribute("item-id", a);
|
|
}
|
|
get item_order() {
|
|
return this.getAttribute("item-order");
|
|
}
|
|
set item_order(a) {
|
|
this.setAttribute("item-order", a);
|
|
}
|
|
get name() {
|
|
return this.getAttribute("name");
|
|
}
|
|
set name(a) {
|
|
this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
|
|
}
|
|
get price() {
|
|
return this.shadowRoot.querySelector("price-input").value;
|
|
}
|
|
set price(a) {
|
|
this.setAttribute("price", a), this.shadowRoot.querySelector("price-input").value = a;
|
|
}
|
|
get picture_url() {
|
|
return this.getAttribute("picture-url");
|
|
}
|
|
set picture_url(a) {
|
|
this.setAttribute("picture-url", a), this.shadowRoot.querySelector("image-input").url = a;
|
|
}
|
|
});
|
|
customElements.define("business-items", class extends Component {
|
|
constructor(){
|
|
super(`
|
|
<style>
|
|
:host { display: block; }
|
|
</style>
|
|
<slot></slot>
|
|
`);
|
|
}
|
|
});
|
|
if (!document.querySelector("#facebook-jssdk")) {
|
|
window.fbAsyncInit = ()=>{
|
|
FB.init({
|
|
appId: "1293538251053124",
|
|
cookie: !0,
|
|
xfbml: !0,
|
|
version: "v14.0"
|
|
}), FB.AppEvents.logPageView(), fireFbReady();
|
|
};
|
|
let b1 = document.createElement("script");
|
|
b1.id = "facebook-jssdk", b1.src = "https://connect.facebook.net/en_US/sdk.js", document.head.appendChild(b1);
|
|
}
|