Выбор предстоящего мероприятия в приложении angular для органайзера - PullRequest
Новая
       29

Выбор предстоящего мероприятия в приложении angular для органайзера

0 голосов
/ 17 апреля 2020

Я создаю приложение органайзера в angular. Здесь я хочу выделить следующее событие, показав его отдельно. Что я должен добавить в метод 'предстоящий', чтобы получить этот вывод. 

//component
export class EventListComponent implements OnInit {

  list: Event[];
  constructor(private service: EventService,
              private firestore: AngularFirestore,
              private toastr: ToastrService) { }

  ngOnInit(): void {
    this.service.getEvents().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...(item.payload.doc.data() as object)
        } as Event;
      });
    });
  }

  onEdit(eve: Event){
    this.service.formData = Object.assign({}, eve);
  }

  upcoming(){ }

  onDelete(id: string){
    if (confirm('Are you sure')){
      this.firestore.doc('events/' + id).delete();
      this.toastr.warning('Deleted successfully', 'Delete');
    }
  }

}

Вот файл HTML. Я хочу, чтобы это выделенное событие было первым в следующем коде 

//html
<div>
  <ul class="list-group" *ngFor="let eve of list">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <label class="mt-2">{{eve.activity}}</label>
      <label class="mt-2">{{eve.date}} / {{eve.time}}</label>
      <div class="mt-2">
       <span class="mx-2 text-success">
         <i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"></i>
       </span>
        <span class="mx-2 text-danger">
         <i class="fas fa-trash" (click)="onDelete(eve.id)"></i>
       </span>
      </div>
    </li>
  </ul>

 <ul class="list-group" *ngFor="let eve of list">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     <label class="mt-2">{{eve.activity}}</label>
     <label class="mt-2">{{eve.date}} / {{eve.time}}</label>
     <div class="mt-2">
       <span class="mx-2 text-success">
         <i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"></i>
       </span>
       <span class="mx-2 text-danger">
         <i class="fas fa-trash" (click)="onDelete(eve.id)"></i>
       </span>
     </div>
   </li>
 </ul>
</div>

Я использую Firebase в качестве базы данных здесь. Я добавил полный код здесь

1 Ответ

0 голосов
/ 18 апреля 2020

У вас может быть способ уменьшить ваши события до даты, ближайшей к дате:

Например: сегодня 

 const today = new Date();
 const closest = events.reduce((a, b) => a.Date - today < b.Date - today ? a : b);

DEMO 

var now = Date.now();
var ONE_DAY_IN_MS = 86400000;
function randomDate() {
  return new Date(now + (5 * ONE_DAY_IN_MS - Math.round(Math.random() * 10 * ONE_DAY_IN_MS)));
}
var data = [
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()}
];

console.log("Entries:");
data.forEach(function(entry) {
  console.log(entry.Date.toISOString());
});

const today = new Date();
const closest = data.reduce((a, b) => a.Date - today < b.Date - today ? a : b);

console.log("today", today.toISOString());
console.log("closest", closest.Date.toISOString());
...