Merge pull request #16 from ssftvyn/module8-task3

new event fixed

src/const.js

@@ -77,6 +77,7 @@ export const TYPES = ['taxi', 'bus', 'train', 'ship', 'drive', 'flight', 'check-
 export const FilterType = {
   EVERYTHING: 'everything',
   FUTURE: 'future',
+  PRESENT: 'present',
   PAST: 'past'
 };
 
@@ -87,9 +88,10 @@ export const SortType = {
 };
 
 export const NoPointsTextType = {
-  [FilterType.EVERYTHING]: 'Click New Event to create your first point',
-  [FilterType.PAST]: 'There are no past events now',
-  [FilterType.FUTURE]: 'There are no future events now'
+  [FilterType.EVERYTHING]: 'click new event to create your first point',
+  [FilterType.PAST]: 'there are no past events now',
+  [FilterType.PRESENT]: 'there are no present events now',
+  [FilterType.FUTURE]: 'there are no future events now'
 };
 
 export const Mode = {

src/main.js

@@ -10,7 +10,7 @@ import PointsApiService from './api-service/points-api';
 import DestinationsApiService from './api-service/destinations-api';
 import OffersApiService from './api-service/offers-api';
 
-const AUTHORIZATION = 'Basic RsgQy3KcnM';
+const AUTHORIZATION = 'Basic hs0NCvhAEP';
 const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
 
 const tripContainer = document.querySelector('.trip-events');

src/presenter/filter-presenter.js

@@ -51,6 +51,11 @@ export default class FilterPresenter {
         name: 'PAST',
         count: filterByType[FilterType.PAST](points).length,
       },
+      {
+        type: FilterType.PRESENT,
+        name: 'PRESENT',
+        count: filterByType[FilterType.PRESENT](points).length,
+      },
       {
         type: FilterType.FUTURE,
         name: 'FUTURE',

src/utils/filter.js

@@ -8,5 +8,14 @@ const filterByFuture = (date, param) => dayjs().isBefore(dayjs(date), param) ||
 export const filterByType = {
   [FilterType.EVERYTHING]: (points) => points,
   [FilterType.FUTURE]: (points) => points.filter((point) => filterByFuture(point.startDate, 'D') || filterByFuture(point.endDate, 'D')),
-  [FilterType.PAST]: (points) => points.filter((point) => filterByPast(point.endDate, 'D') || filterByPast(point.startDate, 'D'))
+  [FilterType.PAST]: (points) => points.filter((point) => filterByPast(point.endDate, 'D') || filterByPast(point.startDate, 'D')),
+  [FilterType.PRESENT]: (points) => points.filter((point) => {
+    const currentDate = new Date();
+    currentDate.setHours(0, 0, 0, 0);
+    const startDate = new Date(point.startDate);
+    startDate.setHours(0, 0, 0, 0);
+    const endDate = new Date(point.endDate);
+    endDate.setHours(0, 0, 0, 0);
+    return startDate <= currentDate && endDate >= currentDate;
+  })
 };

src/utils/point.js

@@ -23,12 +23,12 @@ export const calculateDuration = (startDate, endDate) => {
   return `${differenceMinutes}M`;
 };
 
-export const sortPointTime = (pointA, pointB) => dayjs(pointA.endDate).diff(dayjs(pointA.startDate)) - dayjs(pointB.endDate).diff(dayjs(pointB.startDate));
+export const sortPointTime = (pointA, pointB) => dayjs(pointB.endDate).diff(dayjs(pointB.startDate)) - dayjs(pointA.endDate).diff(dayjs(pointA.startDate));
 
 export const sortPointDay = (pointA, pointB) => {
   const dateFromDifference = dayjs(pointA.startDate).diff(dayjs(pointB.startDate));
   return dateFromDifference === 0 ? dayjs(pointB.endDate).diff(dayjs(pointA.endDate)) : dateFromDifference;
 };
 
-export const sortPointPrice = (pointA, pointB) => pointA.price - pointB.price;
+export const sortPointPrice = (pointA, pointB) => pointB.price - pointA.price;
 

src/view/edit-point-view.js

@@ -96,7 +96,7 @@ export const editingPointView = (point, destinations, offersIds, isNewPoint) =>
                       ${type}
                     </label>
                     <input class="event__input  event__input--destination" id="event-destination-${destination}"
-                    type="text" name="event-destination" value="${he.encode(destinationData.name)}"
+                    type="text" name="event-destination" value="${destinationData ? he.encode(destinationData.name) : ''}"
                     list="destination-list-1" ${isDisabled ? 'disabled' : ''}>
                     <datalist id="destination-list-1" ${isDisabled ? 'disabled' : ''}>
                      ${generateDestinations(destinations, isDisabled)}
@@ -138,15 +138,15 @@ export const editingPointView = (point, destinations, offersIds, isNewPoint) =>
                     </div>
                   </section>
 
-                  <section class="event__section  event__section--destination">
+                  ${destinationData ? `<section class="event__section  event__section--destination">
                     <h3 class="event__section-title  event__section-title--destination">Destination</h3>
                     <p class="event__destination-description">${destinationData.description}</p>
                      <div class="event__photos-container">
                      <div class="event__photos-tape">
                      ${createPhotosTemplates(destinationData.pictures)}
                     </div>
                     </div>
-                  </section>
+                    </section>` : ''}
                 </section>
               </form>
   </li>`
@@ -238,17 +238,18 @@ export default class EditingPointView extends AbstractStatefulView{
 
   #changeOfferHandler = (event) => {
     event.preventDefault();
-    const offerId = Number(event.target.id.slice(-1));
-    const arrayOffersIds = this._state.offers.filter((n) => n !== offerId);
-    let currentOfferIds = [...this._state.offers];
-    if (arrayOffersIds.length !== this._state.offers.length) {
-      currentOfferIds = arrayOffersIds;
+    const offerId = event.target.id.replace('event-offer-', '');
+    const newOffers = [...this._state.offers];
+    const offerIndex = newOffers.findIndex((id) => id === offerId);
+    if (offerIndex > -1) {
+      newOffers.splice(offerIndex, 1);
     } else {
-      currentOfferIds.push(offerId);
+      newOffers.push(offerId);
     }
     this._setState({
-      offers: currentOfferIds,
+      offers: newOffers,
     });
+    this.updateElement(this._state);
   };
 
   #setStartDatepicker() {

src/view/new-point-button-view.js

@@ -17,5 +17,13 @@ export default class NewPointButtonView extends AbstractView {
   #clickHandler = (event) => {
     event.preventDefault();
     this.#handleClick();
+    this.#hideNoPointsText();
+  };
+
+  #hideNoPointsText = () => {
+    const noPointsTextElement = document.querySelector('.trip-events__msg');
+    if (noPointsTextElement) {
+      noPointsTextElement.style.display = 'none';
+    }
   };
 }

src/view/no-point-view.js

@@ -19,4 +19,3 @@ export default class NoPointView extends AbstractView {
   }
 }
 
-

src/view/point-view.js

@@ -13,9 +13,9 @@ const createOffersTemplates = (allOffers, checkedOffers) => {
 
 export const pointView = (point, destinations, offersIds) => {
   const {type, destination, startDate, endDate, price, isFavorite, offers} = point;
-  const dateFrom = startDate !== null ? humanizePointDate(startDate, 'DD/MM/YY HH:mm') : '';
-  const dateTo = endDate !== null ? humanizePointDate(endDate, 'DD/MM/YY HH:mm') : '';
-  const date = startDate !== null ? humanizePointDate(startDate, 'D MMMM') : '';
+  const dateFrom = startDate !== null ? humanizePointDate(startDate, 'HH:mm') : '';
+  const dateTo = endDate !== null ? humanizePointDate(endDate, 'HH:mm') : '';
+  const date = startDate !== null ? humanizePointDate(startDate, 'MMM D') : '';
   const allTypeOffers = offersIds.find((offer) => offer.type === type);
   const favoriteClass = isFavorite ? 'event__favorite-btn--active' : '';
   const destinationData = destinations.find((dest) => dest.id === destination);