отображаемые данные (временной интервал) относятся к периодульной дате от мангуста - PullRequest
Новая
       27

отображаемые данные (временной интервал) относятся к периодульной дате от мангуста

0 голосов
/ 12 июля 2020

Я работаю над приложением врача и пациента. Я застрял при отображении доступных слотов для конкретной даты

Я получаю следующие доступные 7 дней, используя момент. js следующим образом 

 let days = [];
  let daysRequired = 7;
  for (let i = 0; i <= daysRequired; i++) {
    days.push(moment().add(i, "days").format("Do MMMM YYYY"));
  }

здесь теперь я хочу получить временной интервал, доступный для перикулярный день. слоты хранятся в mon goose db с (startTime и endTime), и я получаю и визуализирую их в perticular e js файл. вот маршрут 

router.get("/bookSlot/:id", ensureAuthenticated, async (req, res) => {
  const id = req.params.id;
  let days = [];
  let daysRequired = 15;
  for (let i = 0; i <= daysRequired; i++) {
    days.push(moment().add(i, "days").format("Do MMMM YYYY"));
  }
  var query = [{ path: "createdBy" }, { path: "slots" }];
  var query1 = [{ path: "createdBy" }, { path: "docdetail" }];

  const docs = await doc.find({ createdBy: id });
  USer.findById(req.params.id, (err, doc) => {
    if (!err) {
      slot
        .find({ createdBy: id })
        .populate(query1)
        .sort("date")
        .then((slots) => {
          res.render("bookSlot", {
            slots: slots,
            doc: doc,
            moment: moment,
            days: days,
            docs: docs,
          });
        });
    }
  });
});

Я могу сделать это, используя следующий logi c в файле e js. здесь я форматирую поле даты с понедельника goose, используя момент js, и сравниваю с датами, хранящимися в массиве дней, используя момент js. если оба совпадают, то отображаются слоты, доступные для перикулярного дня 

 

        <div class="slot_main_div">
          <div class="slot_child_divs" onclick="displaySlot()">
            <%=days[0]%>

           
          </div>
          <div class="slot_child_divs" onclick="displaySlot1()">
            <%=days[1]%>
          </div>
          <div class="slot_child_divs" onclick="displaySlot2()">
            <%=days[2]%>
          </div>
          <div class="slot_child_divs" onclick="displaySlot3()">
            <%=days[3]%>
          </div>
          <div class="slot_child_divs" onclick="displaySlot4()">
            <%=days[4]%>
          </div>
          <div class="slot_child_divs" onclick="displaySlot5()">
            <%=days[5]%>
          </div>
          <div class="slot_child_divs" onclick="displaySlot6()">
            <%=days[6]%>
          </div>
        </div>

        <div class="slot-details" id="slot-details" style="display: none;">
          <ul>
            <% for(i in slots) {%>
            <p></p>
            <% if(moment(slots[i].date).format("Do MMMM YYYY") === days[0])
            {%>
            <li><%= slots[i].startTime%></li>
            <% count++} %> <% } %>
          </ul>
        </div>

        <div class="slot-details" id="slot-details1" style="display: none;">
          <ul>
            <li>
             <% for(i in slots) {%>
              <p></p>
              <% if(moment(slots[i].date).format("Do MMMM YYYY") ===
              days[1]) {%> <%= slots[i].startTime %>  <% } %>
              <p><%= count1%> slots availabl</p>
            </li>
          </ul>
        </div>
       ...repeating the same logic for all divs
        </div>

, а затем индивидуально вызывается функция переключения для каждого события переключения 

function displaySlot() {
  var x = document.getElementById("slot-details");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function displaySlot1() {
  var x = document.getElementById("slot-details1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

повторяется это для всех div

хотя похоже, работает нормально, есть ли способ лучше?

...