File
Implements
Methods
|
fetchAccomodations
|
fetchAccomodations()
|
|
|
|
|
|
infoAccommodation
|
infoAccommodation(accommodation)
|
|
|
Parameters :
| Name |
Optional |
| accommodation |
No
|
|
|
accommodations
|
Type : Object[]
|
Default value : []
|
|
|
|
mobile
|
Type : boolean
|
Default value : false
|
|
|
|
selected
|
Type : number
|
Default value : -1
|
|
|
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';
@Component({
selector: 'app-accomodation',
templateUrl: './accomodation.component.html',
styleUrls: ['./accomodation.component.scss']
})
export class AccomodationComponent implements OnInit {
tripId: number;
activityId: number;
activity: string;
accommodations: Object[] = [];
selected:number = -1; // selected accomodation index (<0 means none selected)
constructor(private route: ActivatedRoute,
private db: DbConnectionService,
private router: Router,
private location: Location) {
}
mobile: boolean = false;
ngOnInit(): void {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
this.mobile = true
}
this.route.params.subscribe(r => {
// reset selection
this.selected = -1;
// error handling
if (!r["tripId"] || isNaN(Number(r["tripId"])))
return alert("Invalid TripID");
if (!r["activityId"]) // error handling
return alert(`Invalid Activity`)
// extract tripID and activity from url
this.tripId = Number(r["tripId"])
this.activityId = Number(r["activityId"])
this.fetchAccomodations();
});
}
// isFirstAccomodation(){
// return isNaN(this.activityId);
// }
fetchAccomodations(){
// let query = this.isFirstAccomodation()
// ? `SELECT *, name as prevAcc FROM FirstAccomodationView WHERE tripID = ${this.tripId} order by level`
// : `SELECT *, name as prevAcc FROM ActivityAccomodationView WHERE activityID=${this.activityId} order by level`
this.db.executeQuery(`SELECT *, name as prevAcc FROM ActivityAccomodationView WHERE activityID=${this.activityId} AND status = "ACTIVE"`).then(r => {
// set data
this.accommodations = r["data"];
// this.activity = this.isFirstAccomodation()
// ? "First Night at " + this.accommodations[0]['place']
// : this.accommodations[0]["activity"]
this.activity = this.accommodations[0]["activity"]
// get prev chosen value
for (let i = 0; i < this.accommodations.length; i++){
if (this.accommodations[i]['name'] === this.accommodations[i]['prevAcc']){
this.selected = i;
break;
}
}
})
}
infoAccommodation(accommodation) {
console.log(accommodation)
this.router.navigateByUrl(`trip/${this.tripId}/activity/${this.activityId}/${accommodation['name']}`);
}
back(){
// if (this.isFirstAccomodation())
// this.router.navigateByUrl(`/home/${this.tripId}`)
// else
this.location.back();
}
}
<div class="header d-flex justify-content-between">
<!-- <h2>{{this.activity}}</h2> -->
<h2>Select Accommodation</h2>
<app-wizard [selectedStep]="3" [tripID] = this.tripId></app-wizard>
</div>
<div class="middle-container mobile-container">
<div class="col-xl-12 d-flex justify-content-center">
<h3>{{this.activity}}</h3>
</div>
<div *ngFor="let acc of accommodations; let i = index" class="col d-flex justify-content-center">
<div class="card accommodation-card custom-box-shadow" (click)="infoAccommodation(acc)">
<!-- <span class="accomodation-selected">
<i class="bi bi-check-circle"></i>
</span> -->
<img class="card-img-top" [src]="acc.picture ? acc.picture : 'https://via.placeholder.com/140x100'">
<div class="card-body">
<div class="card-title">{{acc.level}}</div>
<div class="card-content">{{acc.tagline}}</div>
<!-- <div class="stars">
<span *ngFor="let _ of [].constructor(acc.stars)">★</span>
</div> -->
<p class="card-price">+€{{acc.pricePerNight}}/person</p>
<!-- <div class="row">
<div class="col">
<button class="btn btn-footer-card" (click)="chooseAccommodation()">
Add
</button>
</div>
<div class="col" *ngIf="!(acc.level === 'Own accommodation')">
<button class="btn btn-footer-card" id="info">
Info
</button>
</div>
</div> -->
</div>
</div>
</div>
<!-- <div class="col d-flex justify-content-center">
<div class="card accommodation-card" (click)="selected = accommodations.length"
[ngClass]="{'selected-card': accommodations.length === selected}">
<div class="card-img-top">
</div>
<div class="card-body">
<div class="card-title">Own accommodation</div>
<p class="card-price">€0/person</p>
<div class="row">
<div class="col">
<button class="btn btn-footer" >
Add
</button>
</div>
<div class="col"></div>
<div class="col">
<button class="btn btn-footer" id="info">
Info
</button>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="footer d-flex justify-content-between">
<button type="button" class="btn btn-back" [routerLink]="['/trip', tripId, 'activity', activityId]"><i class="bi bi-back"></i> Back</button>
<!-- <button type="button" class="btn btn-next" [routerLink]="['/trip', tripId, 'itinerary']"> {{ !mobile? 'View Itinerary' : 'Itinerary'}}
</button>
<button type="button" class="btn btn-next" (click)="chooseAccommodation()" [disabled]="selected < 0">Confirm
Accomodation
</button> -->
</div>
@import 'variables';
@import 'footer';
@import 'header';
@import 'custom-card';
.stars {
color: #FAB81E;
font-size: 24pt;
}
.accommodation-card {
width: 300px;
height: 350px;
}
.middle-container {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh
/*header*/
- $header-height
/*footer*/
- $footer-height
/*middle-container margins*/
- (2 * $middle-container-padding-height));
overflow-y: auto;
}
.card-img-top {
text-align: center;
i {
font-size: 72pt;
}
}
.card {
border: 2px solid $primary-background-color;
&.selected-card .accomodation-selected {
display: block;
}
.accomodation-selected {
font-family: Roboto;
font-size: 18pt;
color: white;
position: absolute;
right: 0;
top: 0;
margin: 6px 10px;
text-align: center;
display: none;
opacity: 0.9;
}
.card-body {
padding: 8px 12px;
color: #2F4F4F;
.card-title {
font-weight: 600;
font-size: 14pt;
margin: 0px;
}
.card-price {
font-weight: 500;
color: darkgray;
margin-top: 12px;
text-align: right;
}
}
&.selected-card {
border-color: $primary-button-color;
opacity: 1;
}
&:hover {
cursor: pointer;
}
}
@media only screen and (max-width: 950px) {
.mobile-container {
padding-left: 10%;
padding-right: 10%;
}
}
@media only screen and (max-width: 600px) {
.mobile-container{
padding-left: 0%;
padding-right: 0%;
}
}
#info {
background-color: #0288D1;
right: 15px;
position: absolute;
}
Legend
Html element with directive