@Vadim1411

Вывод данных в HTML в формате не простой таблицы?

Всем доброго времени суток. Уважаемые программисты, прошу вашей помощи.

Есть такого рода данные:

{
    "workers":{
        "welders":[
            {
             "name": "Vadim Sergeevich", 
             "dateStart": "2022-01-14",
             "dateEnd": "2022-03-14"
            },
            {
             "name": "Sergey Vladimirovich",
             "dateStart": "2022-01-01",
             "dateEnd": "2022-03-01"
            },
        ],
        "installers":[
            {
             "name": "Vladimir Petrovich",
             "dateStart": "2022-02-14", 
             "dateEnd": "2022-04-14"
            },
            {
             "name": "Petr Georgievich", 
             "dateStart": "2022-02-02", 
             "dateEnd": "2022-04-02"
            },
        ],
    }
}


Эти данные необходимо вывести в такого рода таблицу:

62cbd44ba1a70801866022.jpeg

Логика таблицы следующая: она отражает явочную численность сотрудников на определенный промежуток времени. К примеру простым языком сотрудник Vadim Sergeevich присутствует на рабочем месте с 2022-01-14 по 2022-03-14 включительно. Следовательно, необходимо сначала получить из объектов массивов "welders" и "installers" максимальную и минимальную даты, далее получить массив с диапазоном дат между максимальной и минимальной и вывести получившийся массив в так называемую "шапку". Далее необходима проверка каждой даты из диапазона с 2022-01-14 по 2022-03-14 на предмет равенства с датой в "шапке" и в случае совпадения в ячейке под датой в "шапке" должна стоять "1", иначе "". Примерно так. Так же есть поля "Quantity", которые отображают общую численность сотрудников определенной должности на каждую дату. Еще есть поле "Total", которое отражает численность вообще всех сотрудников на каждую дату.

Следовательно необходимо сначала получить из объектов массивов "welders" и "installers" максимальную и минимальную даты, далее получить массив с диапазоном дат между максимальной и минимальной и вывести получившийся массив в так называемую "шапку".
--- Я понимаю, как выполнить эту часть, но не могу понять, как выполнить проверку на равенство дат и выводить в определенной последовательности "1" и "" в зависимости от выполнения условия.

Понимаю, что задача не простая, но быть может кто-то сталкивался с подобным и подскажет, как это возможно воплотить в реальность. Ну или хотя бы подскажет, в какую сторону копать. Бьюсь с этим уже не мало времени. Все без толку.

P.S. я с JS стал дружить уж совсем недавно и должного опыта пока что не набрался. Прошу не судить строго.
  • Вопрос задан
  • 270 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Gamelot
Программист php
Даты надо приводить к формату unix timestamp. По сути, это integer. В этом формате можно находить разницу между датами, а также сравнивать даты между собой. Изучить материал можно здесь:

Сравнивать можно как timestamp, так и объект Date(). Но первый вариант даже проще.
Ответ написан
Комментировать
@Vadim1411 Автор вопроса
Добрый день всем. Совсем забыл об этой теме.... Получилось что-то вроде:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=".\node_modules\bootstrap\dist\css\bootstrap.css">
    <title>Document</title>
</head>
<body>
    
    <table class="table table-bordered border-primary"></table>

    <script src="node_modules/moment/min/moment.min.js"></script>
    <script src="test.js"></script>
</body>
</html>


JS

const workers = {
    "welders": [
        {
            "name": "Vadim Sergeevich",
            "dateStart": "2022-01-14",
            "dateEnd": "2022-03-14"
        },
        {
            "name": "Sergey Vladimirovich",
            "dateStart": "2022-01-01",
            "dateEnd": "2022-02-04"
        },
        {
            "name": "Viktoriya",
            "dateStart": "2022-03-02",
            "dateEnd": "2022-04-02"
        },
    ],
    "installers": [
        {
            "name": "Vladimir Petrovich",
            "dateStart": "2022-02-14",
            "dateEnd": "2022-04-14"
        },
        {
            "name": "Petr Georgievich",
            "dateStart": "2022-02-02",
            "dateEnd": "2022-04-02"
        },
    ],
    "storekeeper": [
        {
            "name": "Vladimir Petrovich",
            "dateStart": "2022-02-14",
            "dateEnd": "2022-04-14"
        },
        {
            "name": "Petr Georgievich",
            "dateStart": "2022-02-02",
            "dateEnd": "2022-04-02"
        },
    ],
};


// получаем макс и мин даты

let newMaxDate;
let newMinDate;
const maxMinDate = () => {

    let dateArr = [];
    for (work in workers) {
        workers[work].forEach(elem => {
            let ds = new Date(elem.dateStart);
            let de = new Date(elem.dateEnd);
            dateArr.push(ds, de);
        });
    };

    newMaxDate = new Date(Math.max.apply(null, dateArr));
    newMinDate = new Date(Math.min.apply(null, dateArr));

};
maxMinDate();


// получаем диапазон дат между макс и мин датами

let dateArr = [];
let dateArrAll = [];
const rangeDate = () => {

    let minDate = moment(newMinDate);
    let maxDate = moment(newMaxDate);
    while (minDate <= maxDate) {
        dateArr.push(minDate.format('DD'));
        dateArrAll.push(minDate.format('YYYY-MM-DD'))
        minDate.add(1, 'days');
    };

};
rangeDate();


// получаем диапазон месяцев между макс и мин датами

let monthArr = [];
const rangeMonth = () => {

    let minDate = moment(newMinDate);
    let maxDate = moment(newMaxDate);
    while (maxDate > minDate || maxDate.format('M') === minDate.format('M')) {
        monthArr.push(minDate.format());
        minDate.add(1, 'month');
    };

};
rangeMonth();


// получаем первые элементы для шапки

let head = []
const header = () => {

    for (key in workers) {
        workers[key].forEach(elem => {
            head.push((Object.keys(elem)));
        })
    };

};
header();
let headFirst = head[0];



// выводим таблицу

const getTable = () =>{

    const table = document.querySelector(".table");

    for(key in workers){
        let thead = document.createElement("thead");
        let tr = document.createElement("tr");
        let th = document.createElement("th");
        let fragment = document.createDocumentFragment();

        th.innerText = key;
        th.style.textAlign = "center";
        th.colSpan = 3;
        fragment.appendChild(th);

        monthArr.forEach(elem => {
            let th = document.createElement("th");
            th.style.textAlign = "center";
            let colspan = moment(elem).daysInMonth();
            th.colSpan = colspan;
            th.innerText = moment(elem).format('MMMM');
            fragment.appendChild(th);
        })

        tr.appendChild(fragment);
        thead.appendChild(tr);

        let tr2 = document.createElement("tr");
        headFirst.forEach(elem => {
            let th2 = document.createElement("th");
            th2.style.textAlign = "center";
            th2.innerText = elem;
            fragment.appendChild(th2);
        })

        dateArr.forEach(elem => {
            let th3 = document.createElement("th");
            th3.innerText = elem;
            fragment.appendChild(th3);
        })

        tr2.appendChild(fragment);
        thead.appendChild(tr2);
        table.appendChild(thead);

        let numArrAll =[];
        let tbody = document.createElement("tbody");
        workers[key].forEach(elem => {
            let tr = document.createElement("tr");
            Object.values(elem).forEach(txt => {
                let td = document.createElement("td");
                td.style.whiteSpace = "nowrap";
                td.innerText = txt;
                fragment.appendChild(td);
                tr.appendChild(fragment);
            })

            let ds = elem.dateStart;
            let de = elem.dateEnd;

            let numArr =[];
            dateArrAll.forEach(cell => {
                let td = document.createElement("td");
                td.style.textAlign = "center";
                if(cell >= ds && cell <= de){
                    td.style.backgroundColor = "#e6e5e3";
                    td.innerText = 1;
                    numArr.push(1);
                    fragment.appendChild(td);
                    tr.appendChild(fragment);
                }else{
                    td.innerText = '';
                    numArr.push(0);
                    fragment.appendChild(td);
                    tr.appendChild(fragment);
                }
            })
            tbody.appendChild(tr);
            numArrAll.push(numArr);

        })

        // ПРОВЕРИТь

        // let tr3 = document.createElement("tr");
        // let thQ = document.createElement("th");
        // thQ.innerText = "Quantity";
        // thQ.colSpan = 3;
        // thQ.style.textAlign = "right";
        // fragment.appendChild(thQ);
        // tr3.appendChild(fragment);
        // tbody.appendChild(tr3);

        // let col;
        // let row;
        // let summ = numArrAll[0].slice();
        // for(row =1; row < numArrAll.length; row++){
        //     for(col = 0; col < summ.length; col++){
        //         let th = document.createElement("th");
        //         th.innerText = summ[col] +=numArrAll[row][col];
        //         fragment.appendChild(th);
        //         tr3.appendChild(fragment);
        //     };
        // };


        table.appendChild(tbody);

        let tr4 = document.createElement("tr");
        tr4.style.height = "30px";
        tr4.appendChild(fragment);
        tbody.appendChild(tr4);
        
    };
    
};

getTable();


Для более менее корректного отображения подключил bootstrap. Для работы с датами использовал moment.js. Спасибо всем за советы. Очень помогли. Получилось в принципе то что и хотел, но не доработал вывод поля "Quantity", которое отображает общую численность сотрудников определенной должности на каждую дату (комментарий ПРОВЕРИТЬ). Может конечно написано и не совсем красиво, но какой-никакой результат.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы