Сергей Ракипов,
добавлена продолжительность собрания
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
fieldset {
border: 1px solid #4B0082;
display: inline-block;
border-radius: 8px;
padding: 2px 4px;
background-color: #EEE8AA;
text-align: center;
}
legend {
color: #9400D3;
font-weight: bold;
border: 1px solid #4B0082;
border-radius: 4px;
background-color: #FFFFFF;
}
fieldset h3 {
margin: 2px auto;
font-weight: normal;
text-align: center;
}
.block {
background-color: #7AFFFF;
padding: 2px 4px;
border-radius: 8px;
margin: 4px auto;
color: #9400D3;
border: 1px solid #4B0082;
}
.duration {}
fieldset h4 {
margin: 0;
}
</style>
</head>
<body>
<div class="reglament"></div>
<script>
const data = [{
title: `Группа «Окунь»
г. Москва, м. Улица 1905 года, Улица 1905 года, 5`,
begin: {
hour: 20,
minute: 0
},
duration: {
hour: 1,
minute: 15
},
weekday: 0
},
{
title: `Группа «Лайф»
г. Тула, проспект Ленина, 22`,
begin: {
hour: 11,
minute: 0
},
duration: {
hour: 1,
minute: 15
},
weekday: 0
},
{
title: `Группа «Люлька»
г. Москва, м. ВДНХ, Москва, Ярославская д.5`,
begin: {
hour: 17,
minute: 0
},
duration: {
hour: 1,
minute: 15
},
weekday: 0
}
];
let oldHtml;
const formatter = new Intl.DateTimeFormat("ru", {
hour: "2-digit",
minute: "2-digit"
});
const nameWeekday = new Intl.DateTimeFormat("ru", {
weekday: "long"
});
function render(obj) {
let {
title,
begin,
duration,
status,
long
} = obj;
return `<div class="block">
<div class="begin">${begin}</div>
<div class="title">${title}</div>
<div class="duration">
<h4>Продолжительность</h4>
${duration}</div>
<div class="time">
<span class="status">${status}</span>
<span class="long">${long}</span>
</div>
</div>`
}
function renderHtml(time, weekday, arr) {
return `<fieldset>
<legend>
${time}
</legend>
<h3>${weekday}</h3>
${arr.join('')}
</fieldset>`
}
function filter(arr) {
const localTime = new Date;
const day = localTime.getDay();
return arr.filter(obj => {
const beginTime = new Date;
let hour = obj.begin.hour;
let minute = obj.begin.minute;
beginTime.setHours(hour, minute, 0, 0);
obj.beginTime = beginTime;
const endTime = new Date;
hour += obj.duration.hour;
minute += obj.duration.minute;
endTime.setHours(hour, minute, 0, 0);
obj.endTime = endTime;
let time = endTime - localTime;
return obj.weekday == day && time > 0;
});
}
function arrSort(a, b) {
return a.begin.hour - b.begin.hour || a.begin.minute - b.begin.minute
}
function create(data) {
const timer = () => {
requestAnimationFrame(timer);
let localTime = new Date;
let arr = filter(data);
arr.sort(arrSort);
arr = arr.map(obj => {
let {
title,
beginTime,
endTime,
} = obj;
begin = `<h4>Начало в</h4> ${formatter.format(beginTime)}`;
let long = beginTime - localTime;
let status = long > 0 ? (long += 60000, `Начнется через`) : `Собрание идет`;
long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
long = formatter.format(long);
let duration = endTime - beginTime;
duration = new Date(duration + localTime.getTimezoneOffset() * 60000);
duration = formatter.format(duration);
obj = {
title,
begin,
duration,
status,
long
};
return render(obj);
});
let weekday = nameWeekday.format(localTime);
weekday = weekday.slice(0, 1).toUpperCase() + weekday.slice(1);
localTime = formatter.format(localTime);
let html = renderHtml(localTime, weekday, arr);
if (oldHtml == html) return;
document.querySelector(".reglament").innerHTML = oldHtml = html;
};
requestAnimationFrame(timer)
}
create(data)
</script>
</body>
</html>