Skip to content

Commit 6029ba5

Browse files
simonharrersimonharrer
committed
Update
1 parent 10026ec commit 6029ba5

1 file changed

Lines changed: 87 additions & 10 deletions

File tree

‎src/main/resources/templates/room.html‎

Lines changed: 87 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66

77
<link href="/bootstrap.min.css" rel="stylesheet">
88
<script src="/bootstrap.bundle.min.js"></script>
9+
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.5.1/vis-timeline-graph2d.min.js" integrity="sha512-JA7jCKVg16tY6QqK9Y6dVnycXUuplg+aeQsvCFCg+b8PkUN4mFOw853tlKI2Q03s+q6uBFdEeS1nc4ngYScitw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.5.1/vis-timeline-graph2d.css" integrity="sha512-iyqJFPM2g+aNANZ4TN96zt2HuYbAiEZfYaEvv1VbSL6fjbxTL7Yot3mx1ce1gpggT15MMM8ZinGw5wpKP1Oksw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
12+
913
<link rel="icon" href="/favicon.ico" type="image/x-icon">
1014
<title>00:00 #[[${room.name}]]</title>
1115

@@ -15,6 +19,22 @@
1519
max-width: 720px;
1620
}
1721
}
22+
23+
.vis-timeline {
24+
border: none;
25+
}
26+
27+
.vis-item.TIMER {
28+
color: white;
29+
background-color: green;
30+
border-color: darkgreen;
31+
}
32+
33+
.vis-item.BREAKTIMER {
34+
color: white;
35+
background-color: red;
36+
border-color: darkred;
37+
}
1838
</style>
1939
</head>
2040
<body>
@@ -71,9 +91,9 @@
7191
<li><button class="dropdown-item" onclick="startBreaktimer(5);"> 5 ☕</button></li>
7292
<li><button class="dropdown-item" onclick="startBreaktimer(10);">10 ☕</button></li>
7393
<li><button class="dropdown-item" onclick="startBreaktimer(15);">15 ☕</button></li>
74-
<li><button class="dropdown-item" onclick="startBreaktimer(15);">30 ☕</button></li>
75-
<li><button class="dropdown-item" onclick="startBreaktimer(15);">45 ☕</button></li>
76-
<li><button class="dropdown-item" onclick="startBreaktimer(15);">60 ☕</button></li>
94+
<li><button class="dropdown-item" onclick="startBreaktimer(30);">30 ☕</button></li>
95+
<li><button class="dropdown-item" onclick="startBreaktimer(45);">45 ☕</button></li>
96+
<li><button class="dropdown-item" onclick="startBreaktimer(60);">60 ☕</button></li>
7797
</ul>
7898
</div>
7999

@@ -116,6 +136,8 @@ <h5 class="modal-title" id="configurationModalLabel">Edit Configuration</h5>
116136
</div>
117137
</div>
118138

139+
<div id="history-timeline" class="mb-5"></div>
140+
119141
<div id="history-container" class="mb-5" style="display: none">
120142
<h5>History <small class="text-muted">Last 24h</small></h5>
121143
<small>
@@ -339,7 +361,12 @@ <h5>Integration with the mob tool</h5>
339361
}
340362
timer();
341363

342-
function prependToHistory(newEntry) {
364+
var historyState = []
365+
var items = new vis.DataSet()
366+
367+
function prependToHistory(entry) {
368+
let newEntry = createHistoryEntry(entry);
369+
343370
let historyElement = document.getElementById('history');
344371
let current = historyElement.innerHTML.toString();
345372
if (!current.includes(newEntry)) {
@@ -348,13 +375,61 @@ <h5>Integration with the mob tool</h5>
348375
historyElement.prepend(newListItem);
349376
}
350377
document.getElementById('history-container').style.display = 'block';
378+
379+
historyState.push(entry);
380+
381+
let start = Date.parse(entry.requested);
382+
let end = Date.parse(entry.requested) + (entry.timer * 60 * 1000);
383+
let icon = typeToIcon(entry.type);
384+
let title = `${icon} ${entry.timer} min started by 👤 ${entry.user}`;
385+
386+
let now = new Date();
387+
items.forEach(item => {
388+
if (item.end > now) {
389+
items.update({id: item.id, end: now})
390+
}
391+
});
392+
393+
items.add({
394+
content: '',
395+
className: entry.type,
396+
start: start,
397+
end: end,
398+
title: title,
399+
group: entry.type === "TIMER" ? 2 : 1
400+
});
351401
}
352402

353403
function clearHistory() {
354404
document.getElementById('history').innerHTML = '';
355405
document.getElementById('history-container').style.display = 'none';
406+
historyState = []
407+
items.clear();
356408
}
357409

410+
411+
412+
function drawHistoryDiagram() {
413+
// Create a Timeline
414+
var timeline = new vis.Timeline(document.getElementById('history-timeline'), items, new vis.DataSet([{id: 1, content: '☕'}, {id: 2, content: '⏲'}]), {
415+
editable: false,
416+
selectable: false,
417+
rollingMode: {
418+
follow: true,
419+
offset: 0.9
420+
},
421+
showMajorLabels: false,
422+
showMinorLabels: true,
423+
stack: false,
424+
zoomable: false,
425+
moveable: false,
426+
start: new Date(new Date().getTime() - (1000 * 60 * 60 * 4) ),
427+
end: new Date(new Date().getTime() + (1000 * 60 * 30) )
428+
});
429+
}
430+
431+
drawHistoryDiagram();
432+
358433
eventSource.addEventListener('INITIAL_HISTORY', (event) => {
359434
console.log('handling event INITIAL_HISTORY ' + event.data);
360435
let historyEntries = JSON.parse(event.data);
@@ -364,7 +439,7 @@ <h5>Integration with the mob tool</h5>
364439
}
365440

366441
historyEntries.forEach(historyEntry => {
367-
prependToHistory(createHistoryEntry(historyEntry));
442+
prependToHistory(historyEntry);
368443
});
369444
})
370445

@@ -375,12 +450,14 @@ <h5>Integration with the mob tool</h5>
375450
let type = timerRequest["type"];
376451

377452
if (user === null || user === "") {
378-
return `🕒 ${formatTodayAware(requested)} ${type === "BREAKTIMER" ? "☕"
379-
: "⏲"} ${timerInMinutes} min`;
453+
return `🕒 ${formatTodayAware(requested)} ${typeToIcon(type)} ${timerInMinutes} min`;
380454
}
381455

382-
return `🕒 ${formatTodayAware(requested)} ${type === "BREAKTIMER" ? "☕"
383-
: "⏲"} ${timerInMinutes} min 👤 ${user}`;
456+
return `🕒 ${formatTodayAware(requested)} ${typeToIcon(type)} ${timerInMinutes} min 👤 ${user}`;
457+
}
458+
459+
function typeToIcon(type) {
460+
return type === "BREAKTIMER" ? "☕" : "⏲"
384461
}
385462

386463
eventSource.addEventListener('TIMER_REQUEST', (event) => {
@@ -421,7 +498,7 @@ <h5>Integration with the mob tool</h5>
421498
requestNextUser = nextUser
422499
requestTimer = timerInMinutes
423500

424-
prependToHistory(createHistoryEntry(timerRequest));
501+
prependToHistory(timerRequest);
425502
});
426503

427504
checkAudioPlayback();

0 commit comments

Comments
 (0)