<div class="container">
  <div class="title-container">
    <div class="row">
      <div class="col-9" *ngIf="editData">
        <h1>Edytuj nową ofertę</h1>
      </div>
      <div class="col-9" *ngIf="!editData">
        <h1>Dodaj nową ofertę</h1>
      </div>
      <div class="col-3">
        <button class="save-button" (click)="addRoom()" [disabled]="!roomForm.valid">Zapisz</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-7">

      <!-- Room form -->
      <form [formGroup]="roomForm" novalidate>
        <p>Tytuł ogłoszenia</p>
        <input formControlName="title" title="Title"
               placeholder="Wpisz tytuł...">
        <p>Opis</p>
        <textarea rows="5" formControlName="description" title="Description"
               placeholder="Dodaj opis...">
        </textarea>
        <div class="row">
          <div class="col-5">
            <p>Liczba osób<input type="number" formControlName="capacity" title="Capacity"
                                 min="0" max="1000" step="1" value="15">
            </p>
          </div>
          <div class="col-6">
            <p>Powierzchnia <span class="small-text">(m<sup>2</sup>)</span><input type="number" formControlName="area" title="Area"
                                       min="0" max="1000" step="5" value="30"></p>
          </div>
          <div class="col-1"></div>
        </div>
        <p>Cena <span class="small-text">(zł/h)</span><input type="number" formControlName="price" title="Price"
                                                             min="0" max="100000" step="1" value="30"></p>

        <!-- Address form -->

        <div formGroupName="address">
          <p>Adres</p>
          <div *ngIf="!defaultCompanyAddress">
            <input formControlName="city" title="City"
                   placeholder="Wpisz miasto...">
            <input formControlName="street" title="Street"
                   placeholder="Wpisz ulicę...">
            <input formControlName="houseNumber" title="House Number"
                   placeholder="Wpisz numer domu...">
            <input formControlName="apartmentNumber" title="ApartmentNumber"
                   placeholder="Wpisz numer mieszkania...">
          </div>
        </div>
      </form>

      <!-- Calendar -->

      <p>Dostępność oferty</p>
      <span class="description">Wybierz od kiedy Twoja oferta ma być widoczna dla
          użytkowników serwisu.</span>
      <div class="row">
        <div class="col-6">
          <p>Od</p>
          <p-calendar [inline]="true" [(ngModel)]="dateFrom" readonlyInput="true" [placeholder]=""
                      [minDate]="minDate"></p-calendar>
        </div>
        <div class="col-6">
          <div *ngIf="autoProlong; else chooseDate">
            <p>Do</p>
            <p-checkbox name="date" binary="true"
                        label="Automatyczne przedłużanie ogłoszenia (widoczne jeśli abonament jest opłacony)."
                        [(ngModel)]="autoProlong">
            </p-checkbox>
          </div>
          <ng-template #chooseDate>
            <div>
              <p>DO</p>
              <p-calendar [inline]="true" [(ngModel)]="dateTo" readonlyInput="true" [placeholder]=""
                          [minDate]="dateFrom"></p-calendar>
              <p-checkbox name="date" binary="true"
                          label="Automatyczne przedłużanie ogłoszenia (widoczne jeśli abonament jest opłacony)."
                          [(ngModel)]="autoProlong">
              </p-checkbox>
            </div>
          </ng-template>
        </div>
      </div>
      <p>Zdjęcia</p>
      <span class="description">Dodaj zdjęcia do swojej oferty sali.</span>
      <div>
        <input type="text" placeholder="Przeglądaj...">
        <button class="add-button"><span>Dodaj</span></button>
      </div>
    </div>

    <!-- Additional information (right column) -->

    <div class="col-5">
      <p>Udogodnienia</p>
      <span class="description">Zaznacz, która z poniższych udogodnień
      posiada dodawana przez Ciebie oferta.</span>
      <div class="info right">
        <div class="isEquipped">
          <p-checkbox name="facilities" binary="true" label="Sala wyposażona w sprzęt komputerowy" [(ngModel)]="isEquipped"></p-checkbox>
        </div>
        <div class="possibilityOfAddingEquipment">
          <p-checkbox name="facilities" binary="true"
                      label="Możliwość wstawienia własnego sprzętu komputerowego" [(ngModel)]="possibilityOfAddingEquipment"></p-checkbox>
        </div>
        <div class="airConditioning">
          <p-checkbox name="facilities" binary="true" label="Klimatyzacja" [(ngModel)]="airConditioning"></p-checkbox>
        </div>
        <div class="wifi">
          <p-checkbox name="facilities" binary="true" label="WiFi" [(ngModel)]="wifi"></p-checkbox>
        </div>
        <div class="facilitiesForTheDisabled">
          <p-checkbox name="facilities" binary="true"
                      label="Udogodnienia dla osób niepełnosprawnych" [(ngModel)]="facilitiesForTheDisabled"></p-checkbox>
        </div>
      </div>
    </div>
  </div>
</div>






import {Component, NgZone, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Room } from '../../common/Room';
import { RoomService } from '../services/room.service';
import {ActivatedRoute, Router} from "@angular/router";
import {UserService} from "../services/user.service";
import {User} from "../../common/User";
import {Observable} from "rxjs/Observable";


declare let google: any;

@Component({
  selector: 'app-room-form',
  templateUrl: './room-form.component.html',
  styleUrls: ['./room-form.component.scss']
})
export class RoomFormComponent implements OnInit {
  public roomID: string;
  public room: Room;
  public userID: string;
  public user: User;
  public roomForm: FormGroup;
  public minDate = new Date();
  public dateFrom: Date;
  public dateTo: Date;
  public airConditioning: boolean;
  public facilitiesForTheDisabled: boolean;
  public wifi: boolean;
  public possibilityOfAddingEquipment: boolean;
  public isEquipped: boolean;
  public autoProlong: boolean;
  public editData: boolean;
  public connectionError: boolean = false;

  geocoder: any;


  constructor(private formBuilder: FormBuilder,
              private roomService: RoomService,
              private userService: UserService,
              private router: Router,
              private route: ActivatedRoute,
              private zone: NgZone,) { }


  ngOnInit() {
    //for lat and long
    this.geocoder = new google.maps.Geocoder();

    //checkboxes
    this.airConditioning = false;
    this.facilitiesForTheDisabled = false;
    this.wifi = false;
    this.possibilityOfAddingEquipment = false;
    this.isEquipped = false;
    this.autoProlong = true;

    //get user info
    this.userID = this.route.snapshot.paramMap.get('userID');
    if (this.userID) {
      this.userService.getUserDataById(this.userID).subscribe((user) => {
        this.user = user;
      });
    } else {
      this.userService.getUserData().subscribe((user) => {
        this.user = user;
      });
    }
    this.roomForm = this.formBuilder.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      capacity: ['', Validators.required],
      area: ['', Validators.required],
      price: ['', Validators.required],
      airConditioning: this.airConditioning,
      facilitiesForTheDisabled: this.facilitiesForTheDisabled,
      wifi: this.wifi,
      possibilityOfAddingEquipment: this.possibilityOfAddingEquipment,
      isEquipped: this.isEquipped,
      address: this.formBuilder.group({
        city: ['', Validators.required],
        street: ['', Validators.required],
        houseNumber: ['', Validators.required],
        apartmentNumber: ['',],
      }),
    });
    //get room info if exist and check if room exist
    this.roomID = this.route.snapshot.paramMap.get('roomID');
    if (this.roomID) {
      this.roomService.getRoomDataById(this.roomID).subscribe((room) => {
        this.room = room;
        if (this.room) {
          this.roomForm.setValue({
            title: this.room.title,
            description: this.room.description,
            capacity: this.room.capacity,
            area: this.room.area,
            price: this.room.price,
            airConditioning: this.room.airConditioning,
            facilitiesForTheDisabled: this.room.facilitiesForTheDisabled,
            wifi: this.room.wifi,
            possibilityOfAddingEquipment: this.room.possibilityOfAddingEquipment,
            isEquipped: this.room.isEquipped,
            address: {
              city: this.room.address.city,
              street: this.room.address.street,
              houseNumber: this.room.address.houseNumber,
              apartmentNumber: this.room.address.apartmentNumber,
            },
          });
        }
      });
      //edit exist room
      this.editData = true;
    } else {
      //add new room
      this.editData = false;
    }
  }