better display
This commit is contained in:
parent
bd61bee720
commit
de03009257
@ -1,43 +1,7 @@
|
||||
(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var f=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,s)=>(typeof require<"u"?require:t)[s]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var y=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!w.call(e,r)&&r!==s&&l(e,r,{get:()=>t[r],enumerable:!(o=p(t,r))||o.enumerable});return e};var g=(e,t,s)=>(s=e!=null?h(u(e)):{},y(t||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e));customElements.define("oswilno-price",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let e=this.shadowRoot,t=parseInt(this.getAttribute("price"));isNaN(t)&&(t=0);let s=parseInt(this.getAttribute("multiplier")),o=t,r=0;isNaN(s)||(o=Math.floor(t/s),r=t%s);let n=this.getAttribute("currency")||"PLN";e.innerHTML=`<style>:host{display:block;}</style><div>${o}.${r>=10?r:r+"0"} ${n}</div>`}});var i=e=>{let t="";for(let o=0;o<document.styleSheets.length;o++){let r=document.styleSheets[o];for(let n=0;n<r.rules.length;n++)t+=r.rules[n].cssText}let s=new CSSStyleSheet;s.replaceSync(t),e.adoptedStyleSheets=[s]};customElements.define("oswilno-error",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
|
||||
(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var E=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,s)=>(typeof require<"u"?require:t)[s]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var g=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of f(t))!u.call(e,n)&&n!==s&&l(e,n,{get:()=>t[n],enumerable:!(o=p(t,n))||o.enumerable});return e};var S=(e,t,s)=>(s=e!=null?m(h(e)):{},g(t||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e));customElements.define("oswilno-price",class extends HTMLElement{});var a=e=>{let t="";for(let o=0;o<document.styleSheets.length;o++){let n=document.styleSheets[o];for(let r=0;r<n.rules.length;r++)t+=n.rules[r].cssText}let s=new CSSStyleSheet;s.replaceSync(t),e.adoptedStyleSheets=[s]};customElements.define("oswilno-error",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
|
||||
<style>:host{display:block;}</style>
|
||||
<div class="flex bg-red-100 rounded-lg p-4 mb-4 text-sm text-red-700">
|
||||
<slot></slot>
|
||||
<div>
|
||||
`,i(e)}});customElements.define("oswilno-parking-space-rents",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`}});customElements.define("oswilno-parking-space-rent",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
|
||||
<style>
|
||||
:host { display: block; width: 100%; }
|
||||
</style>
|
||||
<div class="w-[48%] p-4 bg-white border border-white-200 rounded-lg shadow sm:p-8 dark:bg-white-800 dark:border-white-700 mt-6">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`}});customElements.define("oswilno-parking-space",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
|
||||
<style>
|
||||
:host { display: block; width: 100%; }
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`}});customElements.define("oswilno-parking-space-location",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
|
||||
<style>
|
||||
:host { display: block; width: 100%; }
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`}});import("https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js");var a="Authorization",S="ACX-Authorization",c="ACX-Refresh",d=document.body;d.addEventListener("htmx:beforeOnLoad",function(e){let t=e.detail,s=t.xhr,o=s.status,r=t.successful;if(o===200){let n=s.getResponseHeader(a);n&&(console.log(s),localStorage.setItem("jwt",n.replace(/^Bearer /i,""))),s.getResponseHeader(c)&&localStorage.setItem("refresh",n.replace(/^Bearer /i,""))}else o===401&&localStorage.removeItem("jwt");(o===422||o===400)&&(t.shouldSwap=!0,t.isError=!1)});d.addEventListener("htmx:configRequest",function(e){localStorage.getItem("jwt")&&(e.detail.headers[S]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[a]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[c]=localStorage.getItem("refresh")||"")});})();
|
||||
`,a(e)}});customElements.define("oswilno-parking-space-rents",class extends HTMLElement{});customElements.define("oswilno-parking-space-rent",class extends HTMLElement{});customElements.define("oswilno-parking-space",class extends HTMLElement{});customElements.define("oswilno-parking-space-location",class extends HTMLElement{});import("https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js");var c="Authorization",w="ACX-Authorization",i="ACX-Refresh",d=document.body;d.addEventListener("htmx:beforeOnLoad",function(e){let t=e.detail,s=t.xhr,o=s.status,n=t.successful;if(o===200){let r=s.getResponseHeader(c);r&&(console.log(s),localStorage.setItem("jwt",r.replace(/^Bearer /i,""))),s.getResponseHeader(i)&&localStorage.setItem("refresh",r.replace(/^Bearer /i,""))}else o===401&&localStorage.removeItem("jwt");(o===422||o===400)&&(t.shouldSwap=!0,t.isError=!1)});d.addEventListener("htmx:configRequest",function(e){localStorage.getItem("jwt")&&(e.detail.headers[w]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[c]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[i]=localStorage.getItem("refresh")||"")});})();
|
||||
//# sourceMappingURL=build.js.map
|
||||
|
File diff suppressed because one or more lines are too long
@ -750,6 +750,10 @@ select {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
@ -905,6 +909,10 @@ select {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-\[30\%\] {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.w-\[48\%\] {
|
||||
width: 48%;
|
||||
}
|
||||
@ -1153,15 +1161,33 @@ select {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
@ -1237,9 +1263,9 @@ select {
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-red-400 {
|
||||
.text-red-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-red-700 {
|
||||
@ -1247,14 +1273,19 @@ select {
|
||||
color: rgb(185 28 28 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-red-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(153 27 27 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-yellow-400 {
|
||||
.text-yellow-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 204 21 / var(--tw-text-opacity));
|
||||
color: rgb(202 138 4 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.opacity-75 {
|
||||
@ -1309,31 +1340,11 @@ select {
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-red-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-yellow-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-neutral-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(64 64 64 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-red-900:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(127 29 29 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-yellow-900:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(113 63 18 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:ease-in-out:hover {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@ -1440,6 +1451,16 @@ select {
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(212 212 212 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-red-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
@ -1465,36 +1486,16 @@ select {
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-red-800:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-yellow-800:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(133 77 14 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-neutral-400:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-300:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-white:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-yellow-300:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 224 71 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:border-blue-500:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(59 130 246 / var(--tw-border-opacity));
|
||||
@ -1627,6 +1628,10 @@ select {
|
||||
.xl\:min-h-ffhl {
|
||||
min-height: calc(100vh - 80px - 192px);
|
||||
}
|
||||
|
||||
.xl\:w-\[48\%\] {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
.\[\&\.active\]\:text-black\/90.active {
|
||||
|
@ -55,6 +55,9 @@ pub fn translations(l10n: &mut oswilno_view::TranslationStorage) {
|
||||
.add("Pending", "Oczekuje na akceptację")
|
||||
.add("Approved", "Zaakceptowane")
|
||||
.add("Rejected", "Odrzucone")
|
||||
.add("stage", "etap")
|
||||
.add("Price:", "Cena:")
|
||||
.add("Price", "Cena")
|
||||
.done();
|
||||
}
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="max-w-md w-full p-6 bg-white text-lg">
|
||||
{% include "../parking-spaces/rent_space_info.html" %}
|
||||
</div>
|
||||
<div class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
|
||||
<div class="max-w-md w-full p-6 bg-white shadow-lg">
|
||||
<form
|
||||
{% if let Some(id) = form.id %}
|
||||
hx-put='/parking-spaces/{{parking_space.id}}/parking-space-rents/update/{{id}}'
|
||||
@ -29,7 +29,7 @@
|
||||
<input
|
||||
id="price"
|
||||
name="price_f"
|
||||
class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
class="px-4 py-2 border focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.00"
|
||||
@ -48,7 +48,7 @@
|
||||
{% else %}
|
||||
value="{{"Register parking space rent"|t(hcx)}}"
|
||||
{% endif %}
|
||||
class="w-64 bg-cyan-600 text-white py-2 rounded-lg mx-auto block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 mb-2"
|
||||
class="w-64 bg-cyan-600 text-white py-2 mx-auto block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 mb-2"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -62,7 +62,7 @@
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<oswilno-parking-space-rents>
|
||||
<oswilno-parking-space-rents class="xl:flex justify-between">
|
||||
{% for parking_space_rent in parking_space_rents -%}
|
||||
{% if let Some(parking_space) = parking_space_by_id.get(parking_space_rent.parking_space_id) %}
|
||||
{% if parking_space.state == ParkingSpaceState::Verified || Some(parking_space.account_id.clone()) == account_id %}
|
||||
@ -70,32 +70,61 @@
|
||||
{% if let Some(location_id) = parking_space.location_id -%}
|
||||
{% if let Some(location) = location_by_id.get(location_id) -%}
|
||||
|
||||
<oswilno-parking-space-rent id="parking-space-rent-{{ parking_space_rent.id }}">
|
||||
<oswilno-parking-space-rent
|
||||
id="parking-space-rent-{{ parking_space_rent.id }}"
|
||||
class="xl:w-[48%] p-4 bg-white border border-white-200 rounded-lg shadow sm:p-8 dark:bg-white-800 dark:border-white-700 mt-6"
|
||||
>
|
||||
<oswilno-parking-space
|
||||
id="parking-space-{{ parking_space.id }}"
|
||||
{% if let Some(spot) = parking_space.spot %} spot="{{ spot }}" {% endif %}
|
||||
class="flex justify-between"
|
||||
>
|
||||
<span class='spot text-4xl font-bold w-[30%] text-left'>
|
||||
{% if let Some(spot) = parking_space.spot %}
|
||||
{{ spot }}
|
||||
{% else %}
|
||||
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<oswilno-parking-space-location
|
||||
id="parking-space-location-{{ location.id }}"
|
||||
name="{{ location.name }}"
|
||||
stage="{{ location.stage }}"
|
||||
number="{{ location.number }}"
|
||||
class="w-[30%] text-3xl"
|
||||
>
|
||||
<span class="name">{{ location.name }}</span>
|
||||
<span class="number">{{ location.number }}</span>
|
||||
<span class="stage-label text-sm mr-1 ml-1">
|
||||
{{"stage"|t(hcx)}}
|
||||
</span>
|
||||
<span class="stage">
|
||||
{{ location.stage }}
|
||||
</span>
|
||||
</oswilno-parking-space-location>
|
||||
|
||||
<oswilno-account id="account-{{ account.id }}">
|
||||
<oswilno-account
|
||||
id="account-{{ account.id }}"
|
||||
class="w-[30%] text-right font-bold uppercase text-red-800 dark:text-red-400"
|
||||
>
|
||||
<div>{{ account.login }}</div>
|
||||
</oswilno-account>
|
||||
</oswilno-parking-space>
|
||||
<oswilno-price
|
||||
id="parking-space-rent-{{ parking_space_rent.id }}-price"
|
||||
multiplier="100"
|
||||
currency="PLN"
|
||||
price="{{ parking_space_rent.price }}"
|
||||
>
|
||||
{{ parking_space_rent.price }}
|
||||
</oswilno-price>
|
||||
</oswilno-parking-space-rent>
|
||||
|
||||
<div class="xl:flex justify-between mt-6">
|
||||
<span>{{"Price:"|t(hcx)}}</span>
|
||||
<oswilno-price
|
||||
id="parking-space-rent-{{ parking_space_rent.id }}-price"
|
||||
multiplier="100"
|
||||
currency="PLN"
|
||||
price="{{ parking_space_rent.price }}"
|
||||
>
|
||||
<span class="price text-3xl">{{ parking_space_rent.price|display_price }}</span>
|
||||
<span class="currency text-base text-neutral-500 dark:text-neutral-300">PLN</span>
|
||||
</oswilno-price>
|
||||
</div>
|
||||
</oswilno-parking-space-rent>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
@ -1,13 +1,13 @@
|
||||
{% match parking_space.state %}
|
||||
{% when ParkingSpaceState::Pending %}
|
||||
<div class="inline-flex items-center text-base text-center p-1 text-sm text-yellow-400 bg-transparent rounded-sm hover:bg-yellow-200 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300">
|
||||
<div class="inline-flex items-center text-base text-center p-1 text-sm text-yellow-600 bg-transparent rounded-sm">
|
||||
{{"Pending"|t(hcx)}}
|
||||
</div>
|
||||
{% when ParkingSpaceState::Verified %}
|
||||
<div>
|
||||
</div>
|
||||
{% when ParkingSpaceState::Banned %}
|
||||
<div class="inline-flex items-center text-base text-center p-1 text-sm text-red-400 bg-transparent rounded-sm hover:bg-red-200 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300">
|
||||
<div class="inline-flex items-center text-base text-center p-1 text-sm text-red-600 bg-transparent rounded-sm">
|
||||
{{"Rejected"|t(hcx)}}
|
||||
</div>
|
||||
{% endmatch %}
|
||||
|
@ -1,12 +1,12 @@
|
||||
<div class="text-lg font-bold">
|
||||
<span class="text-white-900 truncate dark:text-black">
|
||||
<span class="text-white-900 truncate dark:text-black name">
|
||||
{{location.name}}
|
||||
</span>
|
||||
<span class="text-white-900 truncate dark:text-black">
|
||||
<span class="text-white-900 truncate dark:text-black number">
|
||||
{{location.number}}
|
||||
</span>
|
||||
<span class="text-white-900 truncate dark:text-black">
|
||||
Etap {{location.stage}}
|
||||
<span class="text-white-900 truncate dark:text-black stage">
|
||||
{{"stage"|t(hcx)}} {{location.stage}}
|
||||
</span>
|
||||
<span class="ml-1 mr-1">
|
||||
-
|
||||
|
@ -1,12 +1,12 @@
|
||||
<div>
|
||||
<span class="text-sm font-medium text-white-900 truncate dark:text-black">
|
||||
<span class="text-sm font-medium text-white-900 truncate dark:text-black name">
|
||||
{{location.name}}
|
||||
</span>
|
||||
<span class="text-sm font-medium text-white-900 truncate dark:text-black">
|
||||
<span class="text-sm font-medium text-white-900 truncate dark:text-black number">
|
||||
{{location.number}}
|
||||
</span>
|
||||
<span class="text-sm font-medium text-white-900 truncate dark:text-black">
|
||||
Etap {{location.stage}}
|
||||
<span class="text-sm font-medium text-white-900 truncate dark:text-black stage">
|
||||
{{"stage"|t(hcx)}} {{location.stage}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-black">
|
||||
|
@ -17,7 +17,7 @@ pub fn skip_if<T: std::fmt::Display + PartialEq + Copy>(n: &T, skip: T) -> Resul
|
||||
}
|
||||
|
||||
#[tracing::instrument]
|
||||
pub fn display_price(n: &&i32) -> Result<String> {
|
||||
let n: i32 = **n;
|
||||
pub fn display_price(n: &i32) -> Result<String> {
|
||||
let n: i32 = *n;
|
||||
Ok(format!("{}.{}", n / 100, n % 100))
|
||||
}
|
||||
|
@ -1,14 +1,47 @@
|
||||
customElements.define('oswilno-parking-space-location', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; width: 100%; }
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// static get observedAttributes() { return 'name stage number'.split(' '); }
|
||||
|
||||
// constructor() {
|
||||
// super();
|
||||
// const shadow = this.attachShadow({ mode: 'open' });
|
||||
// shadow.innerHTML = `
|
||||
// <style>
|
||||
// :host { display: block; width: 100%; }
|
||||
// #view {
|
||||
// display: flex;
|
||||
// }
|
||||
// #view span {
|
||||
// margin-right: 0.1rem;
|
||||
// font-size: 0.875rem;
|
||||
// line-height: 1.25rem;
|
||||
// }
|
||||
// </style>
|
||||
// <div id="view">
|
||||
// </div>
|
||||
// <div id="container">
|
||||
// <slot></slot>
|
||||
// </div>
|
||||
// `;
|
||||
// }
|
||||
|
||||
// get name() { return this.getAttribute('name'); }
|
||||
// set name(s) { this.setAttribute('name',s); }
|
||||
// get stage() { return this.getAttribute('stage'); }
|
||||
// set stage(s) { this.setAttribute('stage',s); }
|
||||
// get number() { return this.getAttribute('number'); }
|
||||
// set number(s) { this.setAttribute('number',s); }
|
||||
|
||||
// connectedCallback() { this.render(); }
|
||||
|
||||
// attributeChangedCallback(name, oV, nV) { console.log({name,oV,nV}); this.render(); }
|
||||
|
||||
// render() {
|
||||
// const view = this.shadowRoot.querySelector('#view');
|
||||
// const { name, stage, number } = this;
|
||||
// view.innerHTML = `
|
||||
// <span>${name}</span>
|
||||
// <span>${number}</span>
|
||||
// <span>${stage}</span>
|
||||
// `;
|
||||
// }
|
||||
});
|
||||
|
@ -1,14 +1,15 @@
|
||||
customElements.define('oswilno-parking-space-rent', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; width: 100%; }
|
||||
</style>
|
||||
<div class="w-[48%] p-4 bg-white border border-white-200 rounded-lg shadow sm:p-8 dark:bg-white-800 dark:border-white-700 mt-6">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// constructor() {
|
||||
// super();
|
||||
// const shadow = this.attachShadow({ mode: 'open' });
|
||||
// shadow.innerHTML = `
|
||||
// <style>
|
||||
// :host { display: block; width: 100%; }
|
||||
// </style>
|
||||
// <div class="w-[48%] p-4 bg-white border border-white-200 rounded-lg shadow sm:p-8 dark:bg-white-800 dark:border-white-700 mt-6">
|
||||
// <slot></slot>
|
||||
// </div>
|
||||
// `;
|
||||
// this.classList = "w-[48%] p-4 bg-white border border-white-200 rounded-lg shadow sm:p-8 dark:bg-white-800 dark:border-white-700 mt-6";
|
||||
// }
|
||||
});
|
||||
|
@ -1,23 +1,23 @@
|
||||
customElements.define('oswilno-parking-space-rents', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
shadow.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// constructor() {
|
||||
// super();
|
||||
// const shadow = this.attachShadow({ mode: 'open' });
|
||||
// shadow.innerHTML = `
|
||||
// <style>
|
||||
// :host {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// }
|
||||
// #container {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// width: 100%;
|
||||
// }
|
||||
// </style>
|
||||
// <div id="container">
|
||||
// <slot></slot>
|
||||
// </div>
|
||||
// `;
|
||||
// }
|
||||
});
|
||||
|
||||
|
@ -1,14 +1,25 @@
|
||||
customElements.define('oswilno-parking-space', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; width: 100%; }
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// static get observedAttibutes() { return 'spot'; }
|
||||
// constructor() {
|
||||
// super();
|
||||
// const shadow = this.attachShadow({ mode: 'open' });
|
||||
// shadow.innerHTML = `
|
||||
// <style>
|
||||
// :host { display: block; width: 100%; }
|
||||
// #container {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
// </style>
|
||||
// <div id="container">
|
||||
// <div id="view"></div>
|
||||
// <slot></slot>
|
||||
// </div>
|
||||
// `;
|
||||
// this.render();
|
||||
// }
|
||||
// render() {
|
||||
// const spot = this.getAttribute('spot');
|
||||
// this.shadowRoot.textContent = `${spot}`;
|
||||
// }
|
||||
});
|
||||
|
@ -1,20 +1,20 @@
|
||||
customElements.define('oswilno-price', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
connectedCallback() {
|
||||
let shadow = this.shadowRoot;
|
||||
let price = parseInt(this.getAttribute('price'));
|
||||
if (isNaN(price)) price = 0;
|
||||
const multiplier = parseInt(this.getAttribute('multiplier'));
|
||||
let major = price;
|
||||
let minor = 0;
|
||||
if (!isNaN(multiplier)) {
|
||||
major = Math.floor(price / multiplier);
|
||||
minor = price % multiplier;
|
||||
}
|
||||
const currency = this.getAttribute('currency') || 'PLN';
|
||||
shadow.innerHTML = `<style>:host{display:block;}</style><div>${major}.${minor >= 10 ? minor : minor + '0'} ${ currency }</div>`;
|
||||
}
|
||||
//constructor() {
|
||||
// super();
|
||||
// this.attachShadow({ mode: 'open' });
|
||||
//}
|
||||
//connectedCallback() {
|
||||
// let shadow = this.shadowRoot;
|
||||
// let price = parseInt(this.getAttribute('price'));
|
||||
// if (isNaN(price)) price = 0;
|
||||
// const multiplier = parseInt(this.getAttribute('multiplier'));
|
||||
// let major = price;
|
||||
// let minor = 0;
|
||||
// if (!isNaN(multiplier)) {
|
||||
// major = Math.floor(price / multiplier);
|
||||
// minor = price % multiplier;
|
||||
// }
|
||||
// const currency = this.getAttribute('currency') || 'PLN';
|
||||
// shadow.innerHTML = `<style>:host{display:block;}</style><div>${major}.${minor >= 10 ? minor : minor + '0'} ${ currency }</div>`;
|
||||
//}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user