JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<form data-form>
    <label class="group">
        <span class="label">From:</span>
        <input type="date" date-from required />
    </label>
    <label class="group">
        <span class="label">To:</span>
        <input type="date" date-to required />
    </label>
    <label class="group">
        <span class="label"></span>
        <button>Get</button>
    </label>
</form>
<div class="result" data-result></div>

CSS

body {
    margin: 10px;
    font: 13px Arial;
}
.group {
    display: block;
}
.label {
    display: inline-block;
    width: 40px;
    text-align: right;
}
.result {
    margin-top: 10px;
    border: 1px solid #eee;
    background: #f7f7f7;
    padding: 10px;
}
.result:empty {
    display: none;
}

JavaScript

var $form = $('[data-form]');
var $dateFrom = $('[date-from]');
var $dateTo = $('[date-to]');
var $result = $('[data-result]');

var getReportRangeByDate = function (date) {
    return $.ajax({
        url : 'https://reporting.softserveinc.com/Self/GetDatesReportedTime',
        type : 'post',
        data : {
            date : formatDate(date)
        }
    });
}
var getReportRangeByDateRange = function (from, to) {
    var xhrs = [];
    var dateFrom = new Date(from);
    var dateTo = new Date(to);
    var toBeSureFrom = new Date(from);
    var toBeSureTo = new Date(to);
    toBeSureTo.setDate(toBeSureTo.getDate() + 7);
    while (toBeSureFrom <= toBeSureTo) {
        xhrs.push(getReportRangeByDate(toBeSureFrom));
        toBeSureFrom.setDate(toBeSureFrom.getDate() + 7);
    }
    xhrs.length && showLoading();
    $.when.apply($, xhrs).then(function () {
        var args = Array.prototype.slice.call(arguments);
        var cache = {};
        var days = $.map(args, function (argument) {
            return argument[0].filter(function (day) {
                var date = new Date(day.Date);
                var d = Date.UTC(date.getFullYear(), date.getMonth());
                var isNew = cache[day.Date] === void 0;
                var inRange = d >= dateFrom && d <= dateTo;
                cache[day.Date] = true;
                return isNew && inRange;
            });
        });
        showResult(days);
    });
};
var setInitialDates = function () {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth();
    $dateFrom.get(0).valueAsDate = Date.UTC(year, month);
    $dateTo.get(0).valueAsDate = Date.UTC(year, month + 1, 0);
};
var submitHandler = function (e) {
    e.preventDefault();
    getReportRangeByDateRange(getDateFrom(), getDateTo());
};
var getDateFrom = function () {
    return $dateFrom.val();
};
var getDateTo = function () {
    return $dateTo.val();
};
var countHours = function (days) {
    return...