1

necesito su ayuda:

Resulta que de una api recibo un objeto con un rango de horas segun el lugar:

affiliate{
   "attentionSchedules": [
            {
              "room": "200",
              "floor": 2,
              "schedules": [
                            {
                         "days": [
                            "MO",
                            "TU",
                            "FR",
                            "TH",
                            "WE"
                         ],
               "_id": "x",
                "initialTimeStr": "07:00 am",
                "finalTimeStr": "04:00 pm",
                "initialTime": "2020-11-12T13:00:00.000Z",
                "finalTime": "2020-11-12T22:00:00.000Z"
}
],
   "place": {
    "loc": {
    "type": "Point",
    "coordinates": []
},
"_id": "x",
"name": "Hospital x",
"address": "x"
    }
   }
  ]
 }

Del anterior objeto initialTimeStr y finalTimeStr, es mi rango de horas, por ejemplo va algo asi:

El usuario A, atiende en tres lugares y de esos tres lugares tiene distintos horarios de atención. Lo que yo quiero hacer es que cuando el usuario seleccione "X" lugar, se filtren las horas de acuerdo al luhar y a su vez se obtenga el recorrido del intervalo entre ese rango de horas. A modo que el resultado sea algo asi:

horas

Como se muestra en la imagen el intervalo sería de una hora: 7:00 AM - 8:00 AM ..... - 5:00 PM

Actualmente esto es lo que tengo:

Utilizo la libreria Moment-Range para obtener un rango entre ambos y compararlas

//Variable donde pretendo almacenar el rango de horas
timeList: string[] = [];

// Mapeo el objeto para obtener la hora de inicio y almaceno en variable start
this.start = this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(initialTimeStr => initialTimeStr.initialTimeStr));
console.log('start', this.start);
//Mapeo el objeto para obtener la hora de inicio y almaceno en variable end
this.end = this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(finalTimeStr => finalTimeStr.finalTimeStr) );
console.log('end', this.end);
//Formateo las horas
let start = moment(this.start, "HH:mm");
let end = moment(this.end, "HH:mm");
//let diff = end.subtract(start);

console.log('let start', start);
console.log('let end', end);
//intento obtener el rango
let rangoHoras = momentRange.range(start, end);

//rango start y end
rangoHoras.start.format('HH:mm');
rangoHoras.end.format('HH:mm');

console.log('range start', start);
console.log('range', rangoHoras);

//  this.selectedPlace = this.bookingService.bookingModel.affiliate?.attentionSchedules.filter(schedule => schedule.place._id === this.addressID)
console.log('hourEnd :>>', this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(finalTimeStr => finalTimeStr.finalTimeStr)));

//Si ha seleccionado el lugar
if(this.selectedPlace){
  console.log('hourStart :>>', this.bookingService.bookingModel.affiliate?.attentionSchedules.map(schedule => schedule.schedules.map(initialTimeStr => initialTimeStr.initialTimeStr)));
}

//Metodo que llena la iteracion
  setTime(time: string) {
    this.selectedTime = time;

   // let start = moment()

    //this.convertToDatetime();
  }

Y en el html tengo lo siguiente:

  <div class="col-12" *ngIf="selectedDate" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
                    <div class="mb-1 px-4">
                        <h4 class="primaryText fw-bold m-0">Selecciona hora</h4>
                    </div>
                </div>
                <div class="col-12 mx-4">
                    <div class="row">
                        <div *ngIf="selectedDate" data-aos="fade-up" data-aos-anchor-placement="top-bottom" class="DateContainer ms-4">
                            <!-- Slider main container -->
                            <swiper [config]='swiperConfig' (swiper)="onSwiper($event)" (slideChange)="onSlideChange()">
                                <ng-template swiperSlide class="SwiperItem text-center" *ngFor="let time of timeList; let i = index">

                                    <button *ngIf="selectedTime == time" mat-flat-button color='primary' class="SelectedTime" class="btn">{{time}}
                                    </button>
                                    <button *ngIf="selectedTime != time" mat-stroked-button (click)="setTime(time)" class="btn">{{time}}
                                    </button>
                                </ng-template>
                            </swiper>
                        </div>
                    </div>
                </div>

Realmente lo he intentado, pero no lo he logrado y ya no se que hacer, porfavor ayuda, trate de detallar, muchas gracias de antemano. Soy algo nueva programando, una ayuda, una guía, algo le estare muy agradecida

2
  • Hola!. El problema se ve bastante enredoso. Te propongo un método más ordenado para resolverlo. Primero. Aísla el código que no te funcione y haz un ejemplo funcional en stackblitz.com. Una pregunta, es necesario usar moment? Luxon es una alternativa un tanto ligera, con soporte de types para el ide, es posible que lo cambies?
    – Legna
    el 9 dic. 2021 a las 5:04
  • Hola, gracias por responder, hice otra pregunta ya con lo que probe, lo que no puedo hacer ahora es mostrar en pantalla las horas que ya filtre por rango: es.stackoverflow.com/questions/502336/…
    – Izlia
    el 9 dic. 2021 a las 16:52

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.