показать выравнивание div с датой / временем открытых часов данных JSON - PullRequest
Новая
       8

показать выравнивание div с датой / временем открытых часов данных JSON

0 голосов
/ 21 сентября 2019

По сути, я просто хочу показать div, когда текущая дата и время пользователя совпадают с «часами открытия», определенными в моих данных JSON. Если текущая дата / время пользователя находится за пределами часов работы данных JSON;просто скройте тот же div.

Ниже приведен текущий JS, который у меня есть : (обратите внимание, мне нужно сделать это в vanilla JS; ES6, в идеале. Определенно нетjQuery) 

document.addEventListener('DOMContentLoaded', () => { 
  loadSVGs();
  fetch('https://www.website.com/wp-obfuscate/date/v9/stuff/options')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {

    const hoursoperation = document.getElementById('hours-operation'); 
      console.log(myJson.date['office_hours']);

      var d = new Date(); 
      var dayOfWeek = d.getDay();
      var hour = d.getHours();
      console.log(d);
      console.log(dayOfWeek);
      console.log(hour);

      function matchingDay(hoursoperations) {
        return hoursoperations === dayOfWeek;
      }
      console.log(Object.values(myJson.date).findIndex(matchingDay));

      // Show  element
      var show = function (hoursoperation) {
        hoursoperation.style.display = 'block';
      };
      // Hide an element
      var hide = function (hoursoperation) {
        hoursoperation.style.display = 'none';
      };
      //...

Ниже приведен пример ответа JSON. 

0: {day: "7", starting_time: "0800", closing_time: "1600"}
1: {day: "1", starting_time: "0600", closing_time: "1600"}
2: {day: "2", starting_time: "0600", closing_time: "1600"}
3: {day: "3", starting_time: "0600", closing_time: "1600"}
4: {day: "4", starting_time: "0600", closing_time: "1600"}
5: {day: "5", starting_time: "0600", closing_time: "1600"}
6: {day: "6", starting_time: "0700", closing_time: "1700"}
length: 7
__proto__: Array(0)

Я просто хотел бы показать свой div #hours-operationТОЛЬКО когда текущая дата / время совпадают с моими «открытыми часами» моих данных JSON.

Я также начал придумывать следующий фрагмент;но опять теряюсь.

  // const isActive = starting_time <= closing_time   // test the shift type (normal or inverted)
  // ? (starting_time <= now && closing_time > now)   // normal comparison
  // : (starting_time <= now || closing_time > now);  // inverted comparison
  // console.log(isActive)

Например;на данный момент это: console.log(Object.values(myJson.date).findIndex(matchingDay));

Печать -1 в консоли;который я не уверен, как использовать / продолжить ..... ..... 1029 *

Вот еще одна техника, которую я пробовал: 

 function findMatching(data, date) {
      const dayOfWeek = (date.getDay()||7).toString();
      const time =
        date.getHours().toString().padStart(2,'0') +
        date.getMinutes().toString().padStart(2,'0');
      return data.find( item =>
        item.day === dayOfWeek && (
          item.starting_time <= time &&
          time < item.closing_time 
        )
      );
    }

    console.log(findMatching("test" + data, new Date));

но получаю следующее ошибка консоли : 

Uncaught (in promise) TypeError: data.find is not a function
    at findMatching (index.js:43)
    at eval (index.js:48)

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Ваша findMatching() функция работает нормально.Вы получили ошибку, потому что функция ожидает, что первый параметр является массивом, но вы передали строку "test" + data.

Также вы должны сравнить время как число вместо строки. 

const data = [
{day: "7", starting_time: "0800", closing_time: "1600"},
{day: "1", starting_time: "0600", closing_time: "1600"},
{day: "2", starting_time: "0600", closing_time: "1600"},
{day: "3", starting_time: "0600", closing_time: "1600"},
{day: "4", starting_time: "0600", closing_time: "1600"},
{day: "5", starting_time: "0600", closing_time: "1600"},
{day: "6", starting_time: "0700", closing_time: "1700"}];

function findMatching(data, date) {
  const dayOfWeek = (date.getDay()||7).toString();
  const time = date.getHours() * 100 + date.getMinutes();
  return data.find( item =>
    item.day === dayOfWeek && (
      +item.starting_time <= time &&
      time < +item.closing_time 
    )
  );
}

console.log(findMatching(data, new Date("October 13, 2019 11:13:00"))); // valid
console.log(findMatching(data, new Date("October 13, 2019 16:01:00"))); // not valid
1 голос
/ 23 сентября 2019

Вот одно из решений ..

var openChema = [
{day: "7", starting_time: "0800", closing_time: "1600"},
{day: "1", starting_time: "0600", closing_time: "1600"},
{day: "2", starting_time: "0600", closing_time: "1600"},
{day: "3", starting_time: "0600", closing_time: "1600"},
{day: "4", starting_time: "0600", closing_time: "1600"},
{day: "5", starting_time: "0600", closing_time: "1600"},
{day: "6", starting_time: "0700", closing_time: "1700"}]



var d = new Date();
var day = d.getDay()

var weekDay = openChema.filter(x =>  x.day == day )


var n = d.getHours() < 10 ? "0" +d.getHours()  : d.getHours();
var m = d.getMinutes() < 10 ? "0" +d.getMinutes() : d.getMinutes();

var starting_time = (parseInt(weekDay[0].starting_time) / 100) * 3600;
var closing_time  = (parseInt(weekDay[0].closing_time) / 100) * 3600; 
var now           = (parseInt(n+""+m) /100) * 3600
            
      const hoursoperation = document.getElementById('hours-operation')
       
      if(now>starting_time && now<closing_time){
        
       hoursoperation.style.display = 'block';
        
        
      }else{
         hoursoperation.style.display = 'none';
      }
 <div id="hours-operation" >Hello welcome</div>
...