implemented tag filtering

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

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

@@ -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>

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

@@ -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;
 }

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

@@ -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){
 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){
 }
 
 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(){
     }
     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(){
 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(){
         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';
+    }
 }