Browse Source

implemented tag filtering

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
main
Stephan Richter 6 months ago
parent
commit
469a7c1901
  1. 10
      de.srsoftware.cal.web/src/main/resources/index.html
  2. 19
      de.srsoftware.cal.web/src/main/resources/occ.css
  3. 57
      de.srsoftware.cal.web/src/main/resources/script/index.js

10
de.srsoftware.cal.web/src/main/resources/index.html

@ -10,15 +10,19 @@ @@ -10,15 +10,19 @@
<nav />
<div>
<h1>Event List</h1>
<div id="eventnav"></div>
<span id="eventnav">
<button onclick="fetchLastMonth()">Load previous month</button>
<button onclick="fetchLastYear()">Load previous year</button>
</span>
<span id="tag_selection"></span>
<table id="eventlist">
<tr>
<tr class="head">
<th>ID</th>
<th>Start</th>
<th>End</th>
<th>Location</th>
<th>Title</th>
<th>Tags</th>
<th>Tags – click to filter!</th>
</tr>
</table>
</div>

19
de.srsoftware.cal.web/src/main/resources/occ.css

@ -38,4 +38,23 @@ body.event { @@ -38,4 +38,23 @@ body.event {
text-align: justify;
max-width: 600px;
margin: 0 auto;
}
#close_overlay {
position: fixed;
top: 20px;
right: 20px;
height: 20px;
width: 20px;
background: chocolate;
z-index: 1000;
text-align: center;
border: 1px solid yellow;
border-radius: 5px;
cursor: pointer;
}
#tag_selection {
background: orange;
padding: 3px 10px;
}

57
de.srsoftware.cal.web/src/main/resources/script/index.js

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
var start = null;
var end = null;
var tags = new Set();
function addCell(row,content,id){
var a = document.createElement('a');
@ -13,6 +14,10 @@ function addCell(row,content,id){ @@ -13,6 +14,10 @@ function addCell(row,content,id){
function addRow(json){
var table = document.getElementById('eventlist');
var row = table.insertRow(1);
if (json.tags){
var tagList = json.tags.join(' ');
row.setAttribute('class',tagList);
}
addCell(row,json.id,json.id);
addCell(row,json.start,json.id);
addCell(row,json.end,json.id);
@ -43,11 +48,9 @@ function fetchEvents(start, end){ @@ -43,11 +48,9 @@ function fetchEvents(start, end){
}
function fetchLastMonth(){
console.log('fetchLastMonth, start = ',start);
var startDate = new Date(Date.parse(start+'-01'));
var month = startDate.getMonth() +1;
var year = startDate.getFullYear();
console.log({start:start,month:month,year:year});
month -= 1;
if (month < 1) {
year--;
@ -55,12 +58,10 @@ function fetchLastMonth(){ @@ -55,12 +58,10 @@ function fetchLastMonth(){
}
end = start;
start = year + '-' + (month<10 ? '0' : '') + month;
console.log({start:start,month:month,year:year});
fetchEvents(start,end);
}
function fetchLastYear(){
console.log('fetchLastYear');
var startDate = new Date(Date.parse(start+'-01'));
var month = startDate.getMonth() +1;
var year = startDate.getFullYear();
@ -73,7 +74,8 @@ function fetchLastYear(){ @@ -73,7 +74,8 @@ function fetchLastYear(){
async function handleEvents(response){
if (response.ok){
var json = await response.json();
json.forEach(addRow)
json.forEach(addRow);
updateTagVisibility();
}
}
@ -83,33 +85,52 @@ function loadCurrentEvents(){ @@ -83,33 +85,52 @@ function loadCurrentEvents(){
var year = now.getFullYear();
var month = now.getMonth() + 1;
start = year + '-' + (month < 10 ? '0' : '') + month;
updateLoader(start);
fetchEvents(start,end);
}
}
function showOverlay(url){
var div = document.getElementById('overlay');
div.innerHTML = '';
var iframe = document.createElement('iframe');
iframe.src = url;
div.appendChild(iframe);
div.style.display = 'block';
div.onclick = e => div.style.display = 'none';
var btn = document.createElement('div');
btn.id = 'close_overlay';
btn.innerHTML = '✖';
div.appendChild(btn);
}
function toggleTag(tag){
alert(`toggleTag(${tag})`);
if (tags.has(tag)){
tags.delete(tag);
} else {
tags.add(tag);
}
updateTagVisibility();
}
function updateLoader(){
var nav = document.getElementById('eventnav');
nav.innerHTML = '';
var lastMonth = document.createElement('button');
lastMonth.innerHTML = 'Load previous month';
lastMonth.onclick = e => fetchLastMonth();
var lastYear = document.createElement('button');
lastYear.innerHTML = 'Load previous year';
lastYear.onclick = e => fetchLastYear();
nav.appendChild(lastMonth);
nav.appendChild(lastYear);
function updateTagVisibility(){
var selection = document.getElementById('tag_selection');
selection.innerHTML = 'Selected Tags: ';
selection.style.display = tags.size > 0 ? 'inline' : 'none';
tags.forEach(tag => {
var btn = document.createElement('button');
btn.onclick = e => toggleTag(tag);
btn.innerHTML = tag;
selection.appendChild(btn);
selection.appendChild(document.createTextNode(' '));
});
var table = document.getElementById('eventlist');
for (var tr of table.getElementsByTagName('tr')){
var classes = tr.getAttribute('class');
if (classes =='head') continue;
var all = true;
tags.forEach(tag => {
if (classes.indexOf(tag)<0) all = false;
});
tr.style.display = all ? 'table-row' : 'none';
}
}
Loading…
Cancel
Save