Merge pull request #59 from UdL-EPS-SoftArch/7-detail-apartment-page

7 detail apartment page

angular.json

@@ -34,15 +34,17 @@
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ]
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1MB",
+                  "maximumError": "3MB"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/apartment/apartment-detail/apartment-detail.component.css

@@ -0,0 +1,31 @@
+p {
+  text-align: justify;
+}
+
+img {
+  border-radius: 5px;
+}
+
+.btn-dark {
+  border-radius: 20px;
+  padding: 7px 19px;
+  margin-right: 15px;
+  margin-bottom: 7px;
+}
+
+.btn-dark:hover {
+  cursor: auto;
+  background-color: #212529;
+}
+
+.contact-box {
+  background-color: #c7c8c9;
+  color: black;
+  padding: 15px 25px 0 25px;
+  border-radius: 4px;
+}
+
+.hr-bottom {
+  margin-bottom: 40px;
+  margin-top: 16vh;
+}

src/app/apartment/apartment-detail/apartment-detail.component.html

@@ -0,0 +1,57 @@
+<div>
+  <div style="margin-bottom: 30px">
+    <div class="d-flex justify-content-between align-items-center">
+      <h1>{{ apartment.name }}</h1>
+      <p class="m-0">Data de creació: {{ date }}</p>
+    </div>
+    <p>{{ apartment.address }}, {{ apartment.postalCode }} {{ apartment.city }}, {{ apartment.country }}</p>
+    <hr>
+  </div>
+
+  <div style="margin-bottom: 30px">
+    <div class="row align-items-stretch">
+      <div class="col">
+        <p>{{ apartment.description }}</p>
+
+        <div class="mt-4">
+          <span class="btn btn-dark">Planta {{ apartment.floor }}</span>
+        </div>
+      </div>
+
+      <div class="col h-100">
+        @if (images) {
+          <ngb-carousel>
+            <ng-template ngbSlide>
+              <div class="picsum-img-wrapper">
+                <img class="img-fluid" [src]="images[0]" alt="Random first slide" />
+              </div>
+            </ng-template>
+            <ng-template ngbSlide>
+              <div class="picsum-img-wrapper">
+                <img class="img-fluid" [src]="images[1]" alt="Random second slide" />
+              </div>
+            </ng-template>
+            <ng-template ngbSlide>
+              <div class="picsum-img-wrapper">
+                <img class="img-fluid" [src]="images[2]" alt="Random third slide" />
+              </div>
+            </ng-template>
+          </ngb-carousel>
+        }
+      </div>
+    </div>
+  </div>
+
+
+
+  <div style="margin-bottom: 15px">
+    <hr class="hr-bottom">
+    <h3>Contact</h3>
+    <p>Envia'm un correu electrònic si tens alguna pregunta sobre el pis o vols ficar-te en contacte amb mi per acordar una visita :)</p>
+
+    <div class="d-flex justify-content-between align-items-center contact-box">
+      <p>Username: <strong>{{ owner.username }}</strong></p>
+      <p>Email: <strong>{{ owner.email }}</strong></p>
+    </div>
+  </div>
+</div>

src/app/apartment/apartment-detail/apartment-detail.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { Apartment } from '../apartment';
+import {ApartmentService} from '../apartment.service';
+import {User} from '../../login-basic/user';
+import {Room} from '../../room/room';
+import {NgbCarouselModule} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-apartment-detail',
+  standalone: true,
+  imports: [
+    NgbCarouselModule
+  ],
+  templateUrl: './apartment-detail.component.html',
+  styleUrl: './apartment-detail.component.css'
+})
+export class ApartmentDetailComponent implements OnInit {
+  apartment: Apartment = new Apartment();
+  owner: User = new User();
+  room: Room = new Room();
+  images: string[] = [
+    'https://images.habimg.com/imgh/21706-3651997/apartamento-en-alquiler-lleida-alquiler-lleida_720437e9-1267-41bf-890a-67acbf490cc5G.jpg',
+    'https://images.habimg.com/imgh/21706-3651997/apartamento-en-alquiler-lleida-alquiler-lleida_720437e9-1267-41bf-890a-67acbf490cc5G.jpg',
+    'https://images.habimg.com/imgh/21706-3651997/apartamento-en-alquiler-lleida-alquiler-lleida_720437e9-1267-41bf-890a-67acbf490cc5G.jpg'
+  ];
+  date: string = '';
+
+  constructor(private apartmentService: ApartmentService) {
+  }
+
+
+  ngOnInit(): void {
+    // Mock Apartment
+    this.apartment.id = "1";
+    this.apartment.name = "Pisito Nuevo";
+    this.apartment.address = "Carrer President, 4, 3r A";
+    this.apartment.floor = 2;
+    this.apartment.postalCode = "25005";
+    this.apartment.city = "Lleida";
+    this.apartment.country = "Catalunya";
+    this.apartment.description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+    this.apartment.registrationDate = new Date();
+
+    // Mock Owner (TODO: add more fields)
+    this.owner.username = "owner01";
+    this.owner.email = "owner01@gmail.com";
+
+    // Mock Room (TODO: add more fields)
+    this.room.isOccupied = false;
+
+    //Formatted Date
+    this.date = this.apartment.registrationDate.toLocaleDateString('es-ES');
+  }
+}

src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ import { AdvertisementListComponent } from './advertisement/advertisment-list/ad
 import { DeleteAdvertisementComponent } from './advertisement/advertisement-delete/advertisement-delete.component';
 import { ApartmentListComponent } from './apartment/apartment-list/apartment-list.component';
 import { ApartmentCreateComponent } from './apartment/apartment-create/apartment-create.component';
+import { ApartmentDetailComponent } from './apartment/apartment-detail/apartment-detail.component';
 import { ApartmentUpdateComponent } from './apartment/apartment-update/apartment-update.component';
 import { ApartmentDeleteComponent } from './apartment/apartment-delete/apartment-delete.component';
 import { VisitStatusComponent } from './visit/visit-status/visit-status.component';
@@ -24,6 +25,7 @@ import { RoomUpdateComponent } from './room/room-update/room-update.component';
 import { MyAdvertisementComponent } from './advertisement/my-advertisement-list/my-advertisement.component';
 import { ImageCreateComponent } from './image/image-create/image.component';
 
+
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
   { path: 'users/:id/delete', component: UserDeleteComponent, canActivate: [LoggedInGuard]},
@@ -37,6 +39,7 @@ const routes: Routes = [
   { path: 'advertisements/myAdvertisement', component: MyAdvertisementComponent},
   { path: 'apartments', component: ApartmentListComponent},
   { path: 'apartment/create', component: ApartmentCreateComponent},
+  { path: 'apartment/:id', component: ApartmentDetailComponent},
   { path: 'apartment/:id/update', component: ApartmentUpdateComponent},
   { path: 'apartment/:id/delete', component: ApartmentDeleteComponent},
   { path: 'apartment/:id/images', component: ImageCreateComponent},