Work on screen size and display rent form

assets/build.js

@@ -5,10 +5,10 @@
 			<div>
 		`,c(e)}});customElements.define("oswilno-parking-space",class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.innerHTML=`
 			<style>
-			:host { display: block; }
+			: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",E="ACX-Authorization",i="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 l=s.getResponseHeader(a);l&&(console.log(s),localStorage.setItem("jwt",l.replace(/^Bearer /i,""))),s.getResponseHeader(i)&&localStorage.setItem("refresh",l.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[E]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[a]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[i]=localStorage.getItem("refresh")||"")});})();
+		`}});import("https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js");var a="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,r=t.successful;if(o===200){let l=s.getResponseHeader(a);l&&(console.log(s),localStorage.setItem("jwt",l.replace(/^Bearer /i,""))),s.getResponseHeader(i)&&localStorage.setItem("refresh",l.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[a]="Bearer "+(localStorage.getItem("jwt")||""),e.detail.headers[i]=localStorage.getItem("refresh")||"")});})();
 //# sourceMappingURL=build.js.map

assets/build.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../crates/web-assets/assets/elements/oswilno-price.js", "../crates/web-assets/assets/css.js", "../crates/web-assets/assets/elements/oswilno-error.js", "../crates/web-assets/assets/elements/oswilno-parking-space.js", "../crates/web-assets/assets/app.js"],
-  "sourcesContent": ["customElements.define('oswilno-price', class extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: 'open' });\n\t}\n\tconnectedCallback() {\n\t\tlet shadow = this.shadowRoot;\n\t\tlet price = parseInt(this.getAttribute('price'));\n\t\tif (isNaN(price)) price = 0;\n\t\tconst multiplier = parseInt(this.getAttribute('multiplier'));\n\t\tlet major = price;\n\t\tlet minor = 0;\n\t\tif (!isNaN(multiplier)) {\n\t\t\tmajor = Math.floor(price / multiplier);\n\t\t\tminor = price % multiplier;\n\t\t}\n\t\tconst currency = this.getAttribute('currency') || 'PLN';\n\t\tshadow.innerHTML = `<style>:host{display:block;}</style><div>${major}.${minor >= 10 ? minor : minor + '0'} ${ currency }</div>`;\n\t}\n});\n", "export const copyCss = (shadow) => {\n\tlet css = '';\n\tfor (let i = 0; i < document.styleSheets.length; i++) {\n\t\tconst styleSheet = document.styleSheets[i];\n\t\tfor (let j = 0; j < styleSheet.rules.length; j++) {\n\t\t\tcss += styleSheet.rules[j].cssText;\t\n\t\t}\n\t}\n\tconst sheet = new CSSStyleSheet();\n\tsheet.replaceSync(css);\n\tshadow.adoptedStyleSheets = [sheet];\n};\n", "import { copyCss } from \"../css.js\";\n\ncustomElements.define('oswilno-error', class extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst shadow = this.attachShadow({ mode: 'open' });\n\t\tshadow.innerHTML = `\n\t\t\t<style>:host{display:block;}</style>\n\t\t\t<div class=\"flex bg-red-100 rounded-lg p-4 mb-4 text-sm text-red-700\">\n\t\t\t\t<slot></slot>\n\t\t\t<div>\n\t\t`;\n\t\tcopyCss(shadow);\n\t}\n});\n", "customElements.define('oswilno-parking-space', class extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst shadow = this.attachShadow({ mode: 'open' });\n\t\tshadow.innerHTML = `\n\t\t\t<style>\n\t\t\t:host { display: block; }\n\t\t\t</style>\n\t\t\t<div>\n\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t`;\n\t}\n});\n", "import './elements/oswilno-price.js';\nimport './elements/oswilno-error.js';\nimport './elements/oswilno-parking-space.js';\nimport(\"https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js\");\n\nconst READ_AUTH_HEADER = 'Authorization';\nconst AUTH_HEADER = 'ACX-Authorization';\nconst REFRESH_HEADER = 'ACX-Refresh';\nconst body = document.body;\nbody.addEventListener('htmx:beforeOnLoad', function (evt) {\n\tconst detail = evt.detail;\n\tconst xhr = detail.xhr;\n\tconst status = xhr.status;\n\tconst successful = detail.successful;\n\n\tif (status === 200) {\n\t\tconst bearer = xhr.getResponseHeader(READ_AUTH_HEADER);\n\t\tif (bearer) {\n\t\t\tconsole.log(xhr);\n\t\t\tlocalStorage.setItem('jwt', bearer.replace(/^Bearer /i, ''));\n\t\t}\n\t\tconst refresh = xhr.getResponseHeader(REFRESH_HEADER);\n\t\tif (refresh) {\n\t\t\tlocalStorage.setItem('refresh', bearer.replace(/^Bearer /i, ''));\n\t\t}\n\t} else if (status === 401) {\n\t\tlocalStorage.removeItem('jwt');\n\t}\n\tif (status === 422 || status === 400) {\n\t\tdetail.shouldSwap = true;\n\t\tdetail.isError = false;\n\t}\n});\nbody.addEventListener('htmx:configRequest', function (evt) {\n\tif (!localStorage.getItem('jwt')) {\n\t\treturn;\n\t}\n\tevt.detail.headers[AUTH_HEADER] = 'Bearer ' + (localStorage.getItem('jwt') || '');\n\tevt.detail.headers[READ_AUTH_HEADER] = 'Bearer ' + (localStorage.getItem('jwt') || '');\n\tevt.detail.headers[REFRESH_HEADER] = (localStorage.getItem('refresh') || '');\n});\n\n"],
+  "sourcesContent": ["customElements.define('oswilno-price', class extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: 'open' });\n\t}\n\tconnectedCallback() {\n\t\tlet shadow = this.shadowRoot;\n\t\tlet price = parseInt(this.getAttribute('price'));\n\t\tif (isNaN(price)) price = 0;\n\t\tconst multiplier = parseInt(this.getAttribute('multiplier'));\n\t\tlet major = price;\n\t\tlet minor = 0;\n\t\tif (!isNaN(multiplier)) {\n\t\t\tmajor = Math.floor(price / multiplier);\n\t\t\tminor = price % multiplier;\n\t\t}\n\t\tconst currency = this.getAttribute('currency') || 'PLN';\n\t\tshadow.innerHTML = `<style>:host{display:block;}</style><div>${major}.${minor >= 10 ? minor : minor + '0'} ${ currency }</div>`;\n\t}\n});\n", "export const copyCss = (shadow) => {\n\tlet css = '';\n\tfor (let i = 0; i < document.styleSheets.length; i++) {\n\t\tconst styleSheet = document.styleSheets[i];\n\t\tfor (let j = 0; j < styleSheet.rules.length; j++) {\n\t\t\tcss += styleSheet.rules[j].cssText;\t\n\t\t}\n\t}\n\tconst sheet = new CSSStyleSheet();\n\tsheet.replaceSync(css);\n\tshadow.adoptedStyleSheets = [sheet];\n};\n", "import { copyCss } from \"../css.js\";\n\ncustomElements.define('oswilno-error', class extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst shadow = this.attachShadow({ mode: 'open' });\n\t\tshadow.innerHTML = `\n\t\t\t<style>:host{display:block;}</style>\n\t\t\t<div class=\"flex bg-red-100 rounded-lg p-4 mb-4 text-sm text-red-700\">\n\t\t\t\t<slot></slot>\n\t\t\t<div>\n\t\t`;\n\t\tcopyCss(shadow);\n\t}\n});\n", "customElements.define('oswilno-parking-space', class extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst shadow = this.attachShadow({ mode: 'open' });\n\t\tshadow.innerHTML = `\n\t\t\t<style>\n\t\t\t:host { display: block; width: 100%; }\n\t\t\t</style>\n\t\t\t<div>\n\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t`;\n\t}\n});\n", "import './elements/oswilno-price.js';\nimport './elements/oswilno-error.js';\nimport './elements/oswilno-parking-space.js';\nimport(\"https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js\");\n\nconst READ_AUTH_HEADER = 'Authorization';\nconst AUTH_HEADER = 'ACX-Authorization';\nconst REFRESH_HEADER = 'ACX-Refresh';\nconst body = document.body;\nbody.addEventListener('htmx:beforeOnLoad', function (evt) {\n\tconst detail = evt.detail;\n\tconst xhr = detail.xhr;\n\tconst status = xhr.status;\n\tconst successful = detail.successful;\n\n\tif (status === 200) {\n\t\tconst bearer = xhr.getResponseHeader(READ_AUTH_HEADER);\n\t\tif (bearer) {\n\t\t\tconsole.log(xhr);\n\t\t\tlocalStorage.setItem('jwt', bearer.replace(/^Bearer /i, ''));\n\t\t}\n\t\tconst refresh = xhr.getResponseHeader(REFRESH_HEADER);\n\t\tif (refresh) {\n\t\t\tlocalStorage.setItem('refresh', bearer.replace(/^Bearer /i, ''));\n\t\t}\n\t} else if (status === 401) {\n\t\tlocalStorage.removeItem('jwt');\n\t}\n\tif (status === 422 || status === 400) {\n\t\tdetail.shouldSwap = true;\n\t\tdetail.isError = false;\n\t}\n});\nbody.addEventListener('htmx:configRequest', function (evt) {\n\tif (!localStorage.getItem('jwt')) {\n\t\treturn;\n\t}\n\tevt.detail.headers[AUTH_HEADER] = 'Bearer ' + (localStorage.getItem('jwt') || '');\n\tevt.detail.headers[READ_AUTH_HEADER] = 'Bearer ' + (localStorage.getItem('jwt') || '');\n\tevt.detail.headers[REFRESH_HEADER] = (localStorage.getItem('refresh') || '');\n});\n\n"],
   "mappings": "0sBAAA,eAAe,OAAO,gBAAiB,cAAc,WAAY,CAChE,aAAc,CACb,MAAM,EACN,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,CACnC,CACA,mBAAoB,CACnB,IAAIA,EAAS,KAAK,WACdC,EAAQ,SAAS,KAAK,aAAa,OAAO,CAAC,EAC3C,MAAMA,CAAK,IAAGA,EAAQ,GAC1B,IAAMC,EAAa,SAAS,KAAK,aAAa,YAAY,CAAC,EACvDC,EAAQF,EACRG,EAAQ,EACP,MAAMF,CAAU,IACpBC,EAAQ,KAAK,MAAMF,EAAQC,CAAU,EACrCE,EAAQH,EAAQC,GAEjB,IAAMG,EAAW,KAAK,aAAa,UAAU,GAAK,MAClDL,EAAO,UAAY,4CAA4CG,CAAK,IAAIC,GAAS,GAAKA,EAAQA,EAAQ,GAAG,IAAKC,CAAS,QACxH,CACD,CAAC,ECnBM,IAAMC,EAAWC,GAAW,CAClC,IAAIC,EAAM,GACV,QAASC,EAAI,EAAGA,EAAI,SAAS,YAAY,OAAQA,IAAK,CACrD,IAAMC,EAAa,SAAS,YAAYD,CAAC,EACzC,QAASE,EAAI,EAAGA,EAAID,EAAW,MAAM,OAAQC,IAC5CH,GAAOE,EAAW,MAAMC,CAAC,EAAE,OAE7B,CACA,IAAMC,EAAQ,IAAI,cAClBA,EAAM,YAAYJ,CAAG,EACrBD,EAAO,mBAAqB,CAACK,CAAK,CACnC,ECTA,eAAe,OAAO,gBAAiB,cAAc,WAAY,CAChE,aAAc,CACb,MAAM,EACN,IAAMC,EAAS,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,EACjDA,EAAO,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnBC,EAAQD,CAAM,CACf,CACD,CAAC,ECdD,eAAe,OAAO,wBAAyB,cAAc,WAAY,CACxE,aAAc,CACb,MAAM,EACN,IAAME,EAAS,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,EACjDA,EAAO,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQpB,CACD,CAAC,ECVD,OAAO,mDAAmD,EAE1D,IAAMC,EAAmB,gBACnBC,EAAc,oBACdC,EAAiB,cACjBC,EAAO,SAAS,KACtBA,EAAK,iBAAiB,oBAAqB,SAAUC,EAAK,CACzD,IAAMC,EAASD,EAAI,OACbE,EAAMD,EAAO,IACbE,EAASD,EAAI,OACbE,EAAaH,EAAO,WAE1B,GAAIE,IAAW,IAAK,CACnB,IAAME,EAASH,EAAI,kBAAkBN,CAAgB,EACjDS,IACH,QAAQ,IAAIH,CAAG,EACf,aAAa,QAAQ,MAAOG,EAAO,QAAQ,YAAa,EAAE,CAAC,GAE5CH,EAAI,kBAAkBJ,CAAc,GAEnD,aAAa,QAAQ,UAAWO,EAAO,QAAQ,YAAa,EAAE,CAAC,CAEjE,MAAWF,IAAW,KACrB,aAAa,WAAW,KAAK,GAE1BA,IAAW,KAAOA,IAAW,OAChCF,EAAO,WAAa,GACpBA,EAAO,QAAU,GAEnB,CAAC,EACDF,EAAK,iBAAiB,qBAAsB,SAAUC,EAAK,CACrD,aAAa,QAAQ,KAAK,IAG/BA,EAAI,OAAO,QAAQH,CAAW,EAAI,WAAa,aAAa,QAAQ,KAAK,GAAK,IAC9EG,EAAI,OAAO,QAAQJ,CAAgB,EAAI,WAAa,aAAa,QAAQ,KAAK,GAAK,IACnFI,EAAI,OAAO,QAAQF,CAAc,EAAK,aAAa,QAAQ,SAAS,GAAK,GAC1E,CAAC",
   "names": ["shadow", "price", "multiplier", "major", "minor", "currency", "copyCss", "shadow", "css", "i", "styleSheet", "j", "sheet", "shadow", "copyCss", "shadow", "READ_AUTH_HEADER", "AUTH_HEADER", "REFRESH_HEADER", "body", "evt", "detail", "xhr", "status", "successful", "bearer"]
 }

assets/style.css

@@ -809,10 +809,6 @@ select {
   margin-right: 0.25rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -877,10 +873,6 @@ select {
   height: 100%;
 }
 
-.min-h-screen {
-  min-height: 100vh;
-}
-
 .w-10 {
   width: 2.5rem;
 }
@@ -921,14 +913,18 @@ select {
   max-width: 1280px;
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .list-none {
   list-style-type: none;
 }
 
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -945,6 +941,10 @@ select {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1018,11 +1018,6 @@ select {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
 .bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -1057,11 +1052,6 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-}
-
 .bg-cover {
   background-size: cover;
 }
@@ -1117,11 +1107,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1175,6 +1160,11 @@ select {
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1210,11 +1200,6 @@ select {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
-.text-blue-800 {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
-
 .text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgb(16 185 129 / var(--tw-text-opacity));
@@ -1255,11 +1240,6 @@ 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));
@@ -1270,11 +1250,6 @@ select {
   color: rgb(250 204 21 / var(--tw-text-opacity));
 }
 
-.text-yellow-800 {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity));
-}
-
 .opacity-75 {
   opacity: 0.75;
 }
@@ -1443,36 +1418,16 @@ select {
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
   }
 
-  .dark\:bg-blue-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-gray-700 {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-red-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-yellow-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(113 63 18 / var(--tw-bg-opacity));
-  }
-
   .dark\:text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
   }
 
-  .dark\:text-blue-300 {
-    --tw-text-opacity: 1;
-    color: rgb(147 197 253 / var(--tw-text-opacity));
-  }
-
   .dark\:text-gray-200 {
     --tw-text-opacity: 1;
     color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1488,21 +1443,11 @@ select {
     color: rgb(229 229 229 / var(--tw-text-opacity));
   }
 
-  .dark\:text-red-300 {
-    --tw-text-opacity: 1;
-    color: rgb(252 165 165 / var(--tw-text-opacity));
-  }
-
   .dark\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
-  .dark\:text-yellow-300 {
-    --tw-text-opacity: 1;
-    color: rgb(253 224 71 / var(--tw-text-opacity));
-  }
-
   .dark\:placeholder-gray-400::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175 / var(--tw-placeholder-opacity));
@@ -1677,6 +1622,26 @@ select {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:grid {
+    display: grid;
+  }
+
+  .lg\:min-h-ffh {
+    min-height: calc(100vh - 80px);
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:flex {
+    display: flex;
+  }
+
+  .xl\:min-h-ffhl {
+    min-height: calc(100vh - 80px - 192px);
+  }
+}
+
 .\[\&\.active\]\:text-black\/90.active {
   color: rgb(0 0 0 / 0.9);
 }

crates/oswilno-parking-space/src/lib.rs

@@ -27,6 +27,7 @@ pub async fn init(db: Arc<sea_orm::DatabaseConnection>) {
 pub fn mount(config: &mut ServiceConfig) {
     config.service(root).service(
         scope("/parking-spaces")
+            .service(parking_space_rent_form)
             .service(form_show)
             .service(all_parking_spaces)
             .service(create)
@@ -296,17 +297,20 @@ async fn create(
 }
 
 async fn ensure_locations(db: Arc<sea_orm::DatabaseConnection>) {
-    use oswilno_contract::parking_space_locations::{ActiveModel,Entity};
+    use oswilno_contract::parking_space_locations::{ActiveModel, Entity};
     let records: Vec<_> = [
+        // 1
         ("Wilno", 1, "1a"),
         ("Wilno", 1, "1b"),
         ("Wilno", 1, "2AF1"),
         ("Wilno", 1, "2AF2"),
         ("Wilno", 1, "3"),
         ("Wilno", 1, "4"),
+        // 2
         ("Wilno", 2, "1"),
         ("Wilno", 2, "2"),
         ("Wilno", 2, "3"),
+        // 3
         ("Wilno", 3, "1"),
         ("Wilno", 3, "2"),
         ("Wilno", 3, "3"),
@@ -319,14 +323,15 @@ async fn ensure_locations(db: Arc<sea_orm::DatabaseConnection>) {
         // 5
         ("Wilno", 5, "1"),
         ("Wilno", 5, "2"),
-    ].into_iter().map(|(name, number, stage)|
+    ]
-        oswilno_contract::parking_space_locations::ActiveModel {
+    .into_iter()
-            name: Set(name.to_string()),
+    .map(|(name, number, stage)| ActiveModel {
-            number: Set(number),
+        name: Set(name.to_string()),
-            stage: Set(stage.to_string()),
+        number: Set(number),
-            ..Default::default()
+        stage: Set(stage.to_string()),
-        }
+        ..Default::default()
-    ).collect();
+    })
+    .collect();
     Entity::insert_many(records).exec(&*db).await.ok();
 }
 
@@ -451,26 +456,113 @@ async fn update(
         .finish()
 }
 
-#[derive(Debug, Deserialize)]
+#[derive(Deserialize, Debug, Default)]
-struct ParkingSpaceForm {
+struct ParkingSpaceRentForm {
     pub id: Option<i32>,
-    pub price: i32,
+    pub price: Option<i32>,
-    pub parking_space_id: i32,
 }
 
-#[get("/parking-space-rents/form")]
+#[derive(Debug, Template)]
-async fn parking_space_rent_form() -> HttpResponse {
+#[template(path = "../templates/parking-space-rents/form.html")]
-    todo!()
+struct ParkingSpaceRentFormTemplate {
+    pub form: ParkingSpaceRentForm,
+    pub parking_space: oswilno_contract::parking_spaces::Model,
+    pub location: oswilno_contract::parking_space_locations::Model,
+    lang: Lang,
+    t: Arc<TranslationStorage>,
 }
-#[get("/parking-space-rents/edit/{id}")]
+
-async fn parking_space_rent_edit(id: Path<i32>) -> HttpResponse {
+#[get("/{parking_space_id}/parking-space-rents/form")]
+async fn parking_space_rent_form(
+    req: HttpRequest,
+    db: Data<sea_orm::DatabaseConnection>,
+    session: MaybeAuthenticated,
+    parking_space_id: Path<i32>,
+    t: Data<TranslationStorage>,
+    lang: Lang,
+) -> HttpResponse {
+    let parking_space_id = parking_space_id.into_inner();
+    let db = db.into_inner();
+    let session = session.into_option();
+    let _account_id = session.as_ref().map(|s| s.account_id());
+    let session = session.map(Into::into);
+    let parking_space = {
+        use ::oswilno_contract::parking_spaces::{Column, Entity};
+        let res = Entity::find()
+            .filter(Column::Id.eq(parking_space_id))
+            .one(&*db)
+            .await;
+        match res {
+            Ok(Some(entity)) => entity,
+            error => {
+                tracing::debug!("Parking space does not exists: {error:?}");
+                return HttpResponse::NotFound()
+                    .body("Invalid request, parking space does not exists");
+            }
+        }
+    };
+    let location = {
+        use ::oswilno_contract::parking_space_locations::{Column, Entity};
+        let Some(location_id) = parking_space.location_id else {
+            tracing::debug!("Parking space does not have location id");
+            return HttpResponse::NotFound()
+                .body("Invalid request, parking space does not have location");
+        };
+        let res = Entity::find()
+            .filter(Column::Id.eq(location_id))
+            .one(&*db)
+            .await;
+        match res {
+            Ok(Some(entity)) => entity,
+            error => {
+                tracing::debug!("Parking space location does not exists: {error:?}");
+                return HttpResponse::NotFound()
+                    .body("Invalid request, parking space location does not exists");
+            }
+        }
+    };
+    let body = ParkingSpaceRentFormTemplate {
+        parking_space,
+        location,
+        form: ParkingSpaceRentForm::default(),
+        lang,
+        t: t.into_inner(),
+    };
+    let main = Main {
+        body,
+        title: Blank,
+        opts: MainOpts {
+            show: true,
+            search: None,
+            session,
+        },
+    };
+    let html = if is_partial(&req) {
+        main.render()
+    } else {
+        Layout { main }.render()
+    };
+    HttpResponse::Ok()
+        .append_header((
+            "HX-Redirect",
+            format!(
+                "/parking-spaces/{}/parking-space-rents/form",
+                parking_space_id
+            )
+            .as_str(),
+        ))
+        .append_header(("HX-Retarget", "main"))
+        .body(html.unwrap())
+}
+#[get("/{parking_space_id}/parking-space-rents/edit/{id}")]
+async fn parking_space_rent_edit(_id: Path<i32>) -> HttpResponse {
     todo!()
 }
 #[post("/parking-space-rents/create")]
-async fn parking_space_rent_create(form: Form<ParkingSpaceForm>) -> HttpResponse {
+async fn parking_space_rent_create(_form: Form<ParkingSpaceRentForm>) -> HttpResponse {
     todo!()
 }
 #[put("/parking-space-rents/update")]
-async fn parking_space_rent_update(form: Form<ParkingSpaceForm>) -> HttpResponse {
+async fn parking_space_rent_update(_form: Form<ParkingSpaceRentForm>) -> HttpResponse {
     todo!()
 }

crates/oswilno-parking-space/templates/parking-space-rents/form.html

@@ -1,48 +1,53 @@
-<section id="main-view" class="min-h-screen flex items-center justify-center">
+<section id="main-view" class="lg:min-h-ffh xl:min-h-ffhl flex items-top justify-center">
-	<section class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
+    <section>
-		<form 
+        <div class="max-w-md w-full p-6 bg-white text-lg">
-			{% if let Some(id) = form.id %}
+            {% include "../parking-spaces/single_parking_space.html" %}
-			hx-put='/parking-space-rents/update/{{id}}'
+        </div>
-			{% else %}
+        <div class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
-			hx-post='/parking-space-rents/create'
+            <form 
-			{% endif %}
+                {% if let Some(id) = form.id %}
-			hx-headers="{'Accept':'text/html-partial'}"
+                hx-put='/parking-space-rents/update/{{id}}'
-		>
+                {% else %}
-			{% if let Some(id) = form.id %}
+                hx-post='/parking-space-rents/create'
-				<input type="hidden" value="{{id}}" name="id" />
+                {% endif %}
-			{% endif %}
+                hx-headers="{'Accept':'text/html-partial'}"
+                >
+                {% if let Some(id) = form.id %}
+                <input type="hidden" value="{{id}}" name="id" />
+                {% endif %}
 
-			<input type="hidden" value="{{parking_space.id}}" name="parking_space_id" />
+                <input type="hidden" value="{{parking_space.id}}" name="parking_space_id" />
 
-			<div class="mb-4">
+                <div class="mb-4">
-				<label 
+                    <label 
-					for="price"
+                        for="price"
-					class="block mb-2 text-sm text-gray-600"
+                        class="block mb-2 text-sm text-gray-600"
-				>
+                        >
-					{{ "Price"|t(lang,t) }}
+                        {{ "Price"|t(lang,t) }}
-				</label>
+                    </label>
-				<input 
+                        <input 
-					id="price"
+                        id="price"
-					name="price"
+                        name="price"
-					class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
+                        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
-					type="number"
+                        type="number"
-					required
+                        required
-					{% if let Some(v) = form.price %}
+                        {% if let Some(v) = form.price %}
-					value="{{v}}"
+                        value="{{v}}"
-					{% endif %}
+                        {% endif %}
-				/>
+                        />
-			</div>
+                </div>
-			<div class="mb-6">
+                <div class="mb-6">
-				<input 
+                    <input 
-					type="submit" 
+                    type="submit" 
-					{% if let Some(id) = form.id %}
+                    {% if let Some(id) = form.id %}
-					value="{{"Update parking space rent"|t(lang,t)}}" 
+                    value="{{"Update parking space rent"|t(lang,t)}}" 
-					{% else %}
+                    {% else %}
-					value="{{"Register parking space rent"|t(lang,t)}}" 
+                    value="{{"Register parking space rent"|t(lang,t)}}" 
-					{% endif %}
+                    {% 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 rounded-lg mx-auto block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 mb-2" 
-				/>
+                    />
-			</div>
+                </div>
-		</form>
+            </form>
-	</section>
+        </div>
+    </section>
 </section>

crates/oswilno-parking-space/templates/parking-spaces/all-partial.html

@@ -37,53 +37,29 @@
 					<oswilno-parking-space 
 						id="parking-space-{{ parking_space.id }}"
 						>
+						{% if let Some(account) = account_by_id.get(parking_space.account_id) -%}
 						{% if let Some(location_id) = parking_space.location_id -%}
 						{% if let Some(location) = location_by_id.get(location_id) -%}
 						{% if let Some(spot) = parking_space.spot -%}
-						{% if let Some(account) = account_by_id.get(parking_space.account_id) -%}
+						<div class="lg:grid grid-cols-4 grid-flow-col">
-						<div class="flex items-center justify-between space-x-4">
+                            
-							<div class="flex-shrink-0">
+                            {% include "./single_parking_space.html" %}
-								<span class="text-sm font-medium text-white-900 truncate dark:text-black">
+                            {% include "./parking_space_state.html" %}
-									{{location.name}}
-								</span>
-								<span class="text-sm font-medium text-white-900 truncate dark:text-black">
-									{{location.number}}
-								</span>
-								<span class="text-sm font-medium text-white-900 truncate dark:text-black">
-									Etap {{location.stage}}
-								</span>
-							</div>
-							<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-black">
-								{{spot}}
-							</div>
 
-							{% match parking_space.state %}
+							<div class="flex justify-end">
-							{% when ParkingSpaceState::Pending  %}
+							{% if parking_space.state == ParkingSpaceState::Verified %}
-							<div class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium text-yellow-800 bg-yellow-100 rounded dark:bg-yellow-900 dark:text-yellow-300">
+                                <a
-							<div class="inline-flex items-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">
+                                    class="text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center"
-								Pending
+                                    id="create-rent-{{parking_space.id}}"
-							</div>
+                                    hx-get="/parking-spaces/{{parking_space.id}}/parking-space-rents/form"
-							</div>
+                                    hx-headers='{"Accept":"text/html-partial"}'
-							{% when ParkingSpaceState::Verified %}
+                                    >
-							<div class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300">
-							<div class="inline-flex items-center p-1 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300">
-								Accepted
-							</div>
-							</div>
-							{% when ParkingSpaceState::Banned %}
-							<div class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium text-red-800 bg-red-100 rounded dark:bg-red-900 dark:text-red-300">
-							<div class="inline-flex items-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">
-								Rejected
-							</div>
-							</div>
-							{% endmatch %}
-							<div class="flex">
-								<a class="text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center" >
 									<svg height="48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 171.439 171.439" xml:space="preserve" fill="#000000A">
 										<path style="fill:#000002;" d="M21.803,171.439c-0.463,0-0.922-0.129-1.322-0.378c-0.563-0.351-0.963-0.91-1.113-1.557L1.182,91.241 c-0.313-1.345,0.524-2.688,1.869-3.001l6.729-1.563l76.692-64.254l-4.435-4.012c-1.514,0.934-3.295,1.472-5.2,1.472 c-5.482,0-9.941-4.46-9.941-9.941S71.355,0,76.837,0s9.941,4.46,9.941,9.941c0,1.766-0.463,3.426-1.273,4.864l4.837,4.375 l1.117-0.936c0.902-0.757,2.21-0.781,3.141-0.058l48.281,37.561l6.189-1.438c1.347-0.309,2.688,0.525,3.001,1.87l18.187,78.263 c0.313,1.345-0.524,2.688-1.869,3.001L22.369,171.375C22.182,171.418,21.992,171.439,21.803,171.439z M6.618,92.545l17.054,73.394 l141.149-32.8l-17.055-73.393l-4.879,1.134c-0.022,0.006-0.045,0.011-0.068,0.016L11.556,91.397 c-0.041,0.011-0.082,0.021-0.124,0.029L6.618,92.545z M90.216,25.809L20.553,84.174L136.61,57.205L96.188,25.759 c-0.038,0.539-0.25,1.07-0.64,1.502c-0.925,1.024-2.506,1.104-3.531,0.178L90.216,25.809z M76.837,5 c-2.725,0-4.941,2.217-4.941,4.941s2.217,4.941,4.941,4.941c1.361,0,2.596-0.554,3.491-1.447c0.026-0.027,0.052-0.055,0.079-0.081 c0.849-0.888,1.372-2.091,1.372-3.413C81.778,7.217,79.562,5,76.837,5z M40.256,140.785c-1.135,0-2.162-0.778-2.432-1.931 l-6.447-27.504c-0.315-1.344,0.519-2.689,1.864-3.004c0.829-0.194,1.659,0.048,2.247,0.579c1.199-1.163,2.694-1.983,4.362-2.374 c2.429-0.569,4.937-0.16,7.058,1.156c2.121,1.315,3.603,3.378,4.173,5.809c1.176,5.016-1.949,10.055-6.965,11.23 c-0.386,0.091-0.773,0.156-1.158,0.196l12.745,7.904c1.173,0.729,1.534,2.27,0.807,3.442c-0.728,1.174-2.268,1.533-3.442,0.808 l-12.309-7.635l1.934,8.251c0.315,1.344-0.52,2.689-1.864,3.004C40.637,140.763,40.445,140.785,40.256,140.785z M41.992,111.303 c-0.333,0-0.668,0.039-1,0.116c-1.13,0.266-2.089,0.954-2.701,1.94c-0.612,0.986-0.803,2.151-0.538,3.281 c0.546,2.331,2.888,3.778,5.222,3.239c2.332-0.548,3.785-2.89,3.238-5.223c-0.265-1.13-0.954-2.089-1.94-2.7 C43.577,111.525,42.792,111.303,41.992,111.303z M67.849,133.016c-1.135,0-2.162-0.778-2.432-1.931l-2.969-12.666 c-0.003-0.011-0.005-0.021-0.008-0.033c-0.002-0.011-0.005-0.021-0.007-0.033l-3.14-13.396c0-0.002-0.001-0.005-0.002-0.008 c-0.315-1.344,0.52-2.689,1.864-3.004L76,98.466c1.343-0.315,2.689,0.52,3.004,1.863s-0.52,2.689-1.864,3.004l-12.411,2.909 l2.009,8.568l7.462-1.749c1.344-0.316,2.69,0.52,3.005,1.863c0.315,1.344-0.519,2.689-1.863,3.004l-7.463,1.75l1.835,7.831 l12.412-2.908c1.343-0.315,2.689,0.52,3.004,1.863s-0.52,2.689-1.864,3.004l-14.838,3.479c-0.002,0-0.005,0.001-0.007,0.001 C68.23,132.993,68.038,133.016,67.849,133.016z M93.49,127.005c-1.135,0-2.162-0.778-2.432-1.931l-6.126-26.136 c-0.219-0.933,0.116-1.865,0.791-2.455c0.929-1.001,2.494-1.075,3.51-0.155l18.833,17.021l-4.407-18.801 c-0.315-1.344,0.519-2.689,1.863-3.004c1.346-0.315,2.69,0.52,3.005,1.863l6.126,26.136c0.218,0.93-0.115,1.861-0.786,2.45 c-0.927,1.009-2.495,1.083-3.515,0.161L91.52,105.135l4.406,18.799c0.315,1.344-0.519,2.689-1.864,3.004 C93.871,126.982,93.679,127.005,93.49,127.005z M131.954,117.989c-1.135,0-2.162-0.778-2.432-1.931l-5.556-23.702l-6.93,1.624 c-1.344,0.313-2.69-0.52-3.004-1.863c-0.315-1.344,0.519-2.689,1.864-3.004l18.727-4.39c1.344-0.316,2.689,0.52,3.004,1.863 c0.315,1.344-0.519,2.689-1.864,3.004l-6.929,1.625l5.556,23.702c0.315,1.344-0.519,2.689-1.863,3.004 C132.335,117.967,132.143,117.989,131.954,117.989z">
 										</path>
 									</svg>
 								</a>
+                                {% endif %}
 								<a 
 									href="/parking-spaces/edit/{{parking_space.id}}" 
 									hx-target="main" 

crates/oswilno-parking-space/templates/parking-spaces/form-partial.html

@@ -1,4 +1,4 @@
-<section id="main-view" class="min-h-screen flex items-center justify-center">
+<section id="main-view" class="lg:min-h-ffh xl:min-h-ffhl flex items-top justify-center">
 	<section class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
 		<h2 class="text-xl text-gray-900 mb-2">{{ "Register parking space"|t(lang,t) }}</h2>
 		{% for error in errors.global() %}

crates/oswilno-parking-space/templates/parking-spaces/parking_space_state.html

@@ -0,0 +1,14 @@
+{% match parking_space.state %}
+{% when ParkingSpaceState::Pending  %}
+<div class="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">
+    Pending
+</div>
+{% when ParkingSpaceState::Verified %}
+<div class="text-center p-1 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300">
+    Accepted
+</div>
+{% when ParkingSpaceState::Banned %}
+<div class="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">
+    Rejected
+</div>
+{% endmatch %}

crates/oswilno-parking-space/templates/parking-spaces/single_parking_space.html

@@ -0,0 +1,18 @@
+<div>
+    <span class="text-sm font-medium text-white-900 truncate dark:text-black">
+        {{location.name}}
+    </span>
+    <span class="text-sm font-medium text-white-900 truncate dark:text-black">
+        {{location.number}}
+    </span>
+    <span class="text-sm font-medium text-white-900 truncate dark:text-black">
+        Etap {{location.stage}}
+    </span>
+</div>
+<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-black">
+    {% if let Some(spot) = parking_space.spot %}
+        {{spot}}
+    {% else %}
+        &nbps;
+    {% endif %}
+</div>

crates/oswilno-session/templates/register/partial.html

@@ -1,4 +1,4 @@
-<section id="main-view" class="min-h-screen flex items-center justify-center">
+<section id="main-view" class="lg:min-h-ffh xl:min-h-ffhl flex items-top justify-center">
 	<section class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
 		{% for error in errors.global() %}
 		<oswilno-error>{{error|t(lang,t)}}</oswilno-error>

crates/oswilno-session/templates/sign-in/partial.html

@@ -1,4 +1,4 @@
-<section id="main-view" class="min-h-screen flex items-center justify-center">
+<section id="main-view" class="lg:min-h-ffh xl:min-h-ffhl flex items-top justify-center">
 	<section class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
 		{% for error in errors.global() %}
 		<oswilno-error>{{error|t(lang,t)}}</oswilno-error>

crates/oswilno-view/templates/main.html

@@ -1,6 +1,6 @@
 <main>
 	{% include "navbar.html" %}
-	<section id="main-header" class="pt-16 pb-32 flex content-center items-center justify-center">
+	<section id="main-header" class="pt-16 pb-32 flex content-center items-center justify-center hidden xl:flex">
 		<div class="absolute -z-10 top-0 w-full h-[28rem] bg-center bg-cover" style="background-image:url('/banner.jpg')">
 			<span id="blackOverlay" class="w-full h-full absolute opacity-75 bg-black"></span>
 		</div>

crates/web-assets/assets/elements/oswilno-parking-space.js

@@ -4,7 +4,7 @@ customElements.define('oswilno-parking-space', class extends HTMLElement {
 		const shadow = this.attachShadow({ mode: 'open' });
 		shadow.innerHTML = `
 			<style>
-			:host { display: block; }
+			:host { display: block; width: 100%; }
 			</style>
 			<div>
 			<slot></slot>

crates/web-assets/tailwind.config.js

@@ -5,6 +5,10 @@ module.exports = {
 	],
 	theme: {
 		extend: {},
+        minHeight: {
+            ffh: 'calc(100vh - 80px)',
+            ffhl: 'calc(100vh - 80px - 192px)',
+        }
 	},
 	plugins: [
 		require('@tailwindcss/forms'),